Uploadify插件使用方法

1、下載所需文件

2、導入所需文件，還需要應用jquery.js文件

　　　　

3、導入css、js

　　　　uploadify.css、jquery.uploadify.min.js

4、前端代碼

　　　　p標簽存放uploadify，input的目的是存取上傳成功時，圖片的相對路徑。

<p id="uploadify"></p>
<input id="imagespath" name="ImagesPath" type="hidden" value="" />

　　　　js代碼，需要注意的是，服務端處理的地址，以及上傳成功時的事件處理程序。重寫事件時，要把事件加入overrideEvents數組中，具體可查看js源代碼。

 $('#uploadify').uploadify({
            uploader: '/uploadhandler.ashx',           // 服務器端處理地址
            swf: '/scripts/uploadify/uploadify.swf',    // 上傳使用的 Flash

            width: 80,                          // 按鈕的寬度
            height: 23,                         // 按鈕的高度
            buttonText: "圖片上傳",                 // 按鈕上的文字
            buttonCursor: 'hand',                // 按鈕的鼠標圖標

            fileObjName: 'Filedata',            // 上傳參數名稱

            overrideEvents: ['onDialogClose', 'onUploadSuccess', 'onSelectError', 'onUploadError'],   //要重寫的事件
            onUploadSuccess: function (file, data, response) {
                bootbox.alert("上傳成功");

                $("#imagespath").val(data).after('<img src="' + data + '" style="width: 150px;height: 100%" id="upload" />');

            },
            removeCompleted: true,               // 上傳成功后移除進度條
            fileSizeLimit: "4MB",                  // 文件大小限制
            onSelectError: function (file, errorCode, errorMsg) {
                var msgText = "上傳失敗\n";
                switch (errorCode) {
                    case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:
                        //this.queueData.errorMsg = "每次最多上傳 " + this.settings.queueSizeLimit + "個文件";
                        msgText += "每次最多上傳 " + this.settings.queueSizeLimit + "個文件";
                        break;
                    case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
                        msgText += "文件大小超過限制( " + this.settings.fileSizeLimit + " )";
                        break;
                    case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
                        msgText += "文件大小為0";
                        break;
                    case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
                        msgText += "文件格式不正確，僅限 " + this.settings.fileTypeExts;
                        break;
                    default:
                        msgText += "錯誤代碼：" + errorCode + "\n" + errorMsg;
                }
                bootbox.alert(msgText);

            },
            onUploadError: function (file, errorCode, errorMsg) {
                // Load the swfupload settings
                var settings = this.settings;

                // Set the error string
                var errorString = '上傳失敗';
                switch (errorCode) {
                    case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
                        errorString = '服務器錯誤 (' + errorMsg + ')';
                        break;
                    case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL:
                        errorString = 'Missing Upload URL';
                        break;
                    case SWFUpload.UPLOAD_ERROR.IO_ERROR:
                        errorString = 'IO Error';
                        break;
                    case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
                        errorString = 'Security Error';
                        break;
                    case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
                        alert('The upload limit has been reached (' + errorMsg + ').');
                        errorString = 'Exceeds Upload Limit';
                        break;
                    case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
                        errorString = 'Failed';
                        break;
                    case SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND:
                        break;
                    case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:
                        errorString = 'Validation Error';
                        break;
                    case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
                        errorString = 'Cancelled';
                        this.queueData.queueSize -= file.size;
                        this.queueData.queueLength -= 1;
                        if (file.status == SWFUpload.FILE_STATUS.IN_PROGRESS || $.inArray(file.id, this.queueData.uploadQueue) >= 0) {
                            this.queueData.uploadSize -= file.size;
                        }
                        // Trigger the onCancel event
                        if (settings.onCancel) settings.onCancel.call(this, file);
                        delete this.queueData.files[file.id];
                        break;
                    case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
                        errorString = 'Stopped';
                        break;
                }
                bootbox.alert(errorString);
            },
            // 兩個配套使用
            fileTypeExts: "*.jpg;*.png",             // 擴展名
            fileTypeDesc: "請選擇 jpg png 文件",     // 文件說明

            auto: true,                // 選擇之后，自動開始上傳
            multi: true,               // 是否支持同時上傳多個文件
            queueSizeLimit: 5          // 允許多文件上傳的時候，同時上傳文件的個數
        });

5、后台處理程序

　　　　新建一個一般處理程序，注意js中修改地址。Filedata注意與前端保持一致。在這里我們使用文件的MD5值為文件名存放，保存的時候重復文件會直接覆蓋。這樣就不會有重復的文件。創建目錄的時候，按照年月日來分層。保存成功，把文件的相對地址發送到前端，前端添加一個img標簽顯示圖片，hidden標簽存放路徑地址，以待下一步存到數據庫中。

  HttpPostedFile file = context.Request.Files["Filedata"];
            if (file == null)
            {
                context.Response.Write("上傳為空");
            }
            else
            {
                string filename = Path.GetFileName(file.FileName);
                string ext = Path.GetExtension(filename);
                filename = MD5Helper.GetStreamMD5(file.InputStream); //使用文件的md5值作為文件名，相同文件直接覆蓋存儲   
                string path = "/ImageUpload/" + DateTime.Now.Year + "/" + DateTime.Now.Month + "/" + DateTime.Now.Day +
                              "/";
                Directory.CreateDirectory(context.Server.MapPath(path));
                file.SaveAs(context.Server.MapPath(path + filename + ext));
                context.Response.Write(path + filename + ext);
            }