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); }