用SWFUpload上傳圖片小例子

時間 2019-12-10

原文原文鏈接

在開發項目中，常常會用到上傳圖片，接下來我就用一種簡單的方式給你們分享一下使用SWFUpload的方式上傳圖片。javascript

一、在網站根目錄下新建一個SWFUpload文件夾，把下載的組建放在SWFUpload文件夾中。SWFUpload包含的文件夾裏會包含Images文件夾、handlers.js、swfupload.js、swfupload.swf、swfupload_fp9.swf。html

二、把SWFUpload中的js引過來。java

<script src="../js/jquery-1.7.1.js"></script>
<script src="../SWFUpload/swfupload.js"></script>
<script src="../SWFUpload/handlers.js"></script>

三、在JavaScript中爲SWFUpload設置一些基本屬性。jquery

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    
    <title>上傳文件</title>
    <script src="../js/jquery-1.7.1.js"></script>
    <script src="../SwfUpload/handlers.js"></script>
    <script src="../SwfUpload/swfupload.js"></script>
    <script type="text/javascript">
        var swfu;
        window.onload = function () {
            swfu = new SWFUpload({
                //後臺設置。
                //upload_url：處理上傳文件的服務器端頁面的url地址。
                upload_url: "/ashx/Upload.ashx",
                post_params: {
                    "ASPSESSID": "<%=Session.SessionID %>"  //這裏用到了一個SessionID，默認便可。
                },
                //上傳文件大小。
                file_size_limit: "2 MB",
                //上傳文件類型，這裏能夠上傳的是jpg、gif、png、能夠本身手動加，中間用分號隔開。
                file_types: "*.jpg;*.gif;*.png",
                //指定在文件選取窗口中顯示的文件類型描述，起一個提示和說明的做用
                file_types_description: "JPG Images",
                //指定要上傳的文件的最大致積，該屬性爲0時，表示不限制文件的大小
                file_upload_limit: 0,
                
                //設置一些經常使用的執行函數。
                swfupload_preload_handler: preLoad,
                swfupload_load_failed_handler: loadFailed,
                file_queue_error_handler: fileQueueError,
                file_dialog_complete_handler: fileDialogComplete,
                upload_progress_handler: uploadProgress,
                upload_error_handler: uploadError,
                //上傳成功執行的函數。
                //upload_success_handler: uploadSuccess,
                upload_success_handler: showImage,                
                //加載完成執行的函數。
                upload_complete_handler: uploadComplete,

                //Button的一些經常使用設置。
                //圖片的路徑。
                button_image_url: "/SWFUpload/images/XPButtonNoText_160x22.png",
                //圖片的id。
                button_placeholder_id: "spanButtonPlaceholder",
                //圖片的寬。
                button_width: 160,
                //圖片的高。
                button_height: 22,
                button_text: '<span class="button">請選擇上傳圖片<span class="buttonSmall">(最大爲2MB)</span></span>',
                button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',
                button_text_top_padding: 1,
                button_text_left_padding: 5,

                //Flash設置。在這裏路徑千萬別錯了。
                flash_url: "/SWFUpload/swfupload.swf",    
                flash9_url: "/SWFUpload/swfupload_FP9.swf",

                custom_settings: {
                    upload_target: "divFileProgressContainer"
                },
                // Debug Settings
                debug: false
            });
        }

        //上傳成功之後執行的方法，此方法用於將上傳的圖片顯示出來。
        //serverData：服務端返回過來的數據。
        function showImage(file, serverData) {
            //爲img的src屬性賦值。
            $("#showPhoto").attr("src", serverData);
        }

    </script>
</head>

<body>
    <form id="form1" runat="server">
        <div id="content">
            <div id="swfu_container" style="margin: 0px 10px;">
                <div> <span id="spanButtonPlaceholder"></span></div>
                <div id="divFileProgressContainer" style="height: 75px;"></div>
                <div id="thumbnails"></div>
                <img  id="showPhoto" style="width:300px;height:300px;"/>
            </div>
        </div>
    </form>
</body>
</html>

四、接着寫C#代碼。服務器

public class Upload : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        //獲取文件。
        HttpPostedFile file = context.Request.Files["Filedata"];
        SaveImage(context,file);
    }
    
    private void SaveImage(HttpContext context, HttpPostedFile _file)
    {
        if (_file != null)
        {
            //獲得文件名。
            string fileName = Path.GetFileName(_file.FileName);
            //獲得文件擴展名。
            string fileExtension = Path.GetExtension(_file.FileName);
            if (fileExtension.ToLower() == ".jpg")
            {
                //文件夾的格式爲：UploadImage/年/月/日
                string dir = "/UploadImage/" + DateTime.Now.Year + "/" + DateTime.Now.Month + "/" + DateTime.Now.Day + "/";
                //若是文件夾不存在，就建立。這個地方不要忘了寫context.Request.MapPath
                if (!Directory.Exists(context.Request.MapPath(dir)))
                {
                    Directory.CreateDirectory(context.Request.MapPath(dir));
                }
                //建立一個Guid,目的是爲了爲上傳上來的圖片命名。
                string newFileName = Guid.NewGuid().ToString();
                //爲圖片制定完整路徑。UploadImage/2017/8/21/guid.jpg。
                string fullPath = dir + newFileName + fileExtension;
                //保存。
                file.SaveAs(context.Request.MapPath(fullPath));
                //把物理路徑返回回去。
                context.Response.Write(fullPath);
            }
        }
    }
    
    public bool IsReusable
    {
        get{return false;}
    }
}