在项目中遇到了上传多张图片问题,还需要时时上传后展示图片,就用uploadify做了这个功能,供大家参考借鉴。
$('#file_upload').uploadify({
buttonText : '上传图片',auto : true,//自动上传
progressData : 'speed',//上传速度
multi : true,//true 上传多个文件
height : 25, //设置浏览按钮的高度 ,默认值
width:60, //设置浏览按钮的高度 ,默认值
fileTypeDesc : '文件格式:',
method:'POST',
queueID : 'fileQueue',
fileTypeExts : '*.jpg;*.png',
fileSizeLimit : '15MB',
queueSizeLimit : '4',
swf : 'plug-in/uploadify/uploadify.swf',
uploader : 'bridgeSpecialexamineDiseasesController.do',
overrideEvents : [ 'onDialogClose', 'onUploadError', 'onSelectError' ] ,//重写 onDialogClose默认的错误提示信息就不会出现
onUploadStart : function(file) {
//在onUploadStart事件中,也就是上传之前,把参数写好传递到后台
$('#file_upload').uploadify("settings",
"formData", {
'upload' : 'upload', //方法或者参数
'sessionId':'${pageContext.session.id}',
});
},
onQueueComplete : function(queueData) {
},
onUploadSuccess : function(file, data, response) {
var d = $.parseJSON(data);
if (d.success) {
ids +=ids==""?d.id:","+d.id;
$('#pictureids').textbox('setValue',ids);
var html = "<li> "
+"<div style='position: relative;' id='dfs'>"
+" <img src="+d.url+" name='pictureUrl' width='100px' height='120px' class='myimg'/> <br/> <center> <h3> "+d.name +"</h3> </center> "
+" <div class='del ui-icon-closethick ui-icon' ><input type='hidden' name='imgid' value='"+d.id+"'>删除</div>"
+"</div>"
+" </li>";
$("#pics").append(html);
}
},
onFallback : function() {
alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试")
},
//上传失败 //附件格式不正确,请上传JPG、BMP、PNG格式文件,大小不超过3MB
onUploadError : function(file, errorCode, errorMsg, errorString) {
// 手工取消不弹出提示
if (errorCode == SWFUpload.UPLOAD_ERROR.FILE_CANCELLED
|| errorCode == SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED) {
return;
}
var msgText = "上传失败\n";
switch (errorCode) {
case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
msgText += "HTTP 错误\n" + errorMsg;
break;
case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL:
msgText += "上传文件丢失,请重新上传";
break;
case SWFUpload.UPLOAD_ERROR.IO_ERROR:
msgText += "IO错误";
break;
case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
msgText += "安全性错误\n" + errorMsg;
break;
case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
msgText += "每次最多上传 " + this.settings.uploadLimit + "个";
break;
case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
msgText += errorMsg;
break;
case SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND:
msgText += "找不到指定文件,请重新操作";
break;
case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:
msgText += "参数错误";
break;
default:
msgText += "文件:" + file.name + "\n错误码:" + errorCode + "\n"
+ errorMsg + "\n" + errorString;
}
alert(msgText);
},
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;
}
alert(msgText);
},
onUploadProgress : function(file, bytesUploaded,
bytesTotal, totalBytesUploaded,
totalBytesTotal) {
}
});
注意:(本篇文章可以转载)图片返回值自己可以在后台做处理,返回json格式。根据自己的需求来改写,如果本篇文章有什么错误或其它的请大家提出来。