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