Uploadify插件使用方法

时间:2022-10-28 22:38:08

1、下载所需文件

2、导入所需文件,还需要应用jquery.js文件

    Uploadify插件使用方法

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