请稍侯

jquery uploadify实现文件上传

13 October 2015
更多

最近在做项目的时候,经常要用到文件上传功能,以前,做文件上传,都是用最原始最笨的方法,后来看到人家用插件,感觉还蛮方便,所以也改用插件了,今天要介绍的这个插件是比较常见的jquery uploadify,使用很方便,只需要通过简单的配置,就可以实现文件上传了,而且还可以带进度条,也可以取消, 下面介绍一下如何配置uploadify

首先需要在页面上引入插件和样式:

uploadify.css"<!--uploadify 样式-->
jquery-1.7.2.min.js<!--jquery 插件-->
jquery.uploadify.min.js<!--uploadify 插件-->

第二,jsp页面上需要引入两个空间,一个是用于游览本地文件的,一个是用来显示进度条的:如下所示



第三,将uploadify绑定到file控件上,

$("#sxzp").uploadify({
'queueID': 'file_queue',<!--queueID控制进度条-->
'auto': true,<!--是否自动上传文件-->
'method': "post",<!--提交方式-->
'height': 20,<!--按钮高度-->
'width': 100,<!--按钮宽度-->
'swf': '<%=request.getContextPath()%>/tools/uploadify/uploadify.swf', <!-- uploadify flash文件的路径-->
'uploader': '<%=request.getContextPath()%>/xmfk/qbxs/jsp/uploadFile.jsp?systemid=${systemid}',<!--上传文件的提交地址-->
'rollover': true,
'fileTypeDesc': '请选择jpg,jpge,gif,png格式的文件',<!--文件类型描述-->
'fileTypeExts': '.jpg;.jpge;.gif;.png;',<!--文件扩展名过滤-->
'fileSizeLimit': '1024KB',<!--文件大小限制,格式为1KB或1MB-->
'buttonText': '附件上传',<!--按钮显示的文字-->
'uploadLimit': 100,<!--可以上传文件的最大数量-->
'successTimeout': 5,
'requeueErrors': false,
'multi': false,<!--是否允许多文件上传-->
'progressData': 'percentage',<!--进度条显示,百分比-->
'removeTimeout': 1,
'removeCompleted': true,<!--上传成功后移除进度条-->
'queueSizeLimit': 999,
'onUploadSuccess': function (file, data, response) {
<!--文件上传成功做处理的方法,一般是图片回显-->
},
'onError': function (event, ID, fileObj, errorObj) {
alert(errorObj.type + ' Error: ' + errorObj.info);
},
'onInit': function () {

},
'onUploadStart' : function(file) {
}

});

PS:uploadify官方下载地址:http://www.uploadify.com/