Javascript使用上传来实现多文件上传

使用上传来实现文件上传能够客户端判断文件大小、控制文件上传的类型、实现多文件上传、显示进度条等功能，方便易用，兼容性较好

本例是把dwz中整合上传功能抽取出来的，可以进行单独使用，不一定要遭dwz中才能使用，本例只是为了测试，所以使用静态页面进行测试：

话不多说，代码敬上

2、html页面的代码

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML头titleMyHtml.html/title元http-equiv=' content-type ' content=' text/HTML；charset=UTF-8 ' link href=' resources/dwz/uploadify/CSS/uploadify。CSS ' rel='样式表type=' text/CSS ' media=' screen '/script src=' http : resources/dwz/js/jquery-1。7 .2 .js ' type=' text/JavaScript '/script src=' http : resources/dwz/uploadify/scripts/jquery。上传。js ' type- link rel="样式表"类型="text/CSS"href=./style。“CSS”-样式类型=“文本/CSS”媒体=“屏幕”.my-uploadify-button {背景：无；border:无；文本-阴影：无；边界半径： 0;} .uploadify:hover .my-uploadify-button {背景：无；border:无；} .文件队列{宽度： 400px高度： 150像素；飞越：汽车；border: 1px实心# E5E 5；边距-底部： 10px}/样式脚本类型=' text/JavaScript ' $(function(){ $(' # TestFileInput ')).uploadify({ swf : ' resources/dwz/uploadify/scripts/uploadify。' swf '，上传程序： ' servlet/uploadify。do '，//上传的URL form data : { phpsessid : ' XXX '，ajax:1}，buttonText: '请选择文件，文件大小限制：'200KB '，//设置上传大小文件类型描述：'*。jpg*。jpeg*。' gif* . 'png '，fileTypeExts: ' * .jpg*。jpeg*。gif*。png '，//允许的后缀auto:true，//是否自动上传multi:true，overrideevents 3360['在对话框关闭时'，' onUploadError '，' onSelectError' ]，//重新错误信息的显示方法onSelectError : uploadify _ onSelectError，onuploadeerror : uploadify _ onuploadeerror，onuploads成功： uploadify _onuploads成功})；$(“# TestFileInput 2”).uploadify({ swf : ' resources/dwz/uploadify/scripts/uploadify。swf '、uploader : ' servlet/uploadify。do '、form data : { phpsessid : ' XXX '、ajax:1 '、queueID:'fileQueue '、button image : ' resources/dwz/uploadify/img/add。jpg '、按钮类： ' my-uploadify-button 'jpg*。jpeg*。' gif* . 'png '，fileTypeExts: ' * .jpg*。jpeg*。gif*。png '，override events 3360[' on dialog close '，' onuploadererror '，' onSelectError' ]，onSelectError : uploadify _ onSelectError，onuploadererror : uploadify _ onuploadererror，onuploaderrsuccess : uploadify _onuploaderrs成功})；});/剧本/头身！-单文件上传-input id=' test file input ' type=' file ' name=' image '/div class=' divider '/div！-多文件上传-输入id='testFileInput2 '类型=“文件”名称='image2'/div id='fileQueue '类='文件队列'/div输入类型=' image ' src=' http : resources/dwz/uploadify/img/upload。jpg ' onclick=' $(' # TestFileInput 2 ').uploadify('upload '，' *；'/input type=' image ' src=' http : resources/dwz/uploadify/img/cancel。jpg ' onclick=' $(' # TestFileInput 2 ').uploadify('cancel '，' *；'//body /html 3，上传的小型应用程序代码

打包上传文件；导入Java。io。文件；导入Java。io。ioexception导入Java。乌提尔。迭代器；导入Java。乌提尔。列表；导入javax。servlet。servletexception导入javax。servlet。http。HttpServlet导入javax。servlet。http。HttpServletrequest导入javax。servlet。http。HttpServletResponse导入组织。阿帕奇。公地。文件上传。FileItem导入组织。阿帕奇。公地。文件上传。文件上传异常；导入组织。阿帕奇。公地。文件上传。磁盘。disk fileitemfactory导入组织。阿帕奇。公地。文件上传。servlet。servlet文件上传；公共类上传文件扩展了httpersvlet { @ Override protected void service(httpersvletrequest请求，HttpServletResponse响应)抛出ServletException，IOException { super.service(请求，响应);} @ Override protected void doPost(httpersvletrequest req，HttpServletResponse resp)引发ServletException，IOException { //临时目录基于字符串路径=req。getservletcontext().getRealPath('上传');字符串tempDir=' temp文件临时文件=新文件（基本路径文件。分隔符临时目录);if(！临时文件。exists()){ tempfile。mkdir()；} DiskFileItemFactory DFC=new DiskFileItemFactory()；DFC。setsizethreshold(1 * 1024 * 1024)；//设置临界值DFC。setrepository(TempFile)；//设置临时上传目录servlet file upload upload=new servlet file upload(DFC)；上传。setheaderencoding(' UTF-8 ')；//设置编码//设置文件最大值，这里设置5Mb，5 * 1024 * 1024；上传。setsizemax(5 * 1024 * 1024)；尝试{列表文件列表=上传。parserequest(请求)；iteratorfileitemiterator=文件列表。迭代器()；while(迭代器。HasNeXt()){ file item item=iterator。NeXt()；字符串FIlename=项目。GetName()；//得到文件名if (fileName！=null){//system。出去。println(FIlename)；//系统。出去。println(项目。getSize())；文件源文件=新文件（基本路径文件。分隔符文件名);项目。写(源文件)；} } } catch(文件uploadexception e){ e . printstacktrace()；} catch(异常e){ e . print stack trace()；} //resp.getWriter().打印('上传成功！');} @覆盖受保护的void doGet(Httpservletrequest请求，HttpServletResponse响应)引发ServletException，IOException { super.doPost(req，resp)；} } 4，web.xml配置

servlet servlet-名称upLoadify/servlet-名称servlet-classuploadFile.UploadFile/servlet-class/servlet servlet-映射servlet-名称upLoadify/servlet-名称URL-模式/servlet/uploadify。do/URL-模式/servlet-映射5、上传的提示信息是英文的，为了显示中文的提示信息，将其错误提示方法进行重新，新建errorCode.js放入在资源/dwz/上传/脚本文件夹下面，并在页面进行导入这个js，js代码如下：

var uploadify_onSelectError=函数（文件，错误代码，错误消息){ var msgText='上传失败\ n '；开关（错误代码){ case SWFUpload .QUEUE_ERROR .QUEUE _ LIMIT _ EXCEDED ://这。QUEUE数据。错误消息='每次最多上传' this.settings.queueSizeLimit '个文件；'' msgText='每次最多上传' this.settings.queueSizeLimit '个文件；打破；案例SWFUpload .QUEUE_ERROR .'文件_过卷_大小_限制：消息文本='文件大小超过限制(“这个。设置。file size limit ")；打破；案例SWFUpload .QUEUE_ERROR .ZERO_BYTE_FILE: msgText='文件大小为0';打破；案例SWFUpload .QUEUE_ERROR .' INVALID_FILETYPE: msgText='文件格式不正确，仅限这个。设置。filetypexts打破；'' default: msgText='错误代码：' errorCode ' \ n ' errorMsg}警报(MSgtext)；};var uploadify _ onUploadError=函数（文件、错误代码、错误消息、错误字符串){ //手工取消不弹出提示if (errorCode==SWFUpload .上传_错误. FILE _ canceled | |错误代码==SWFUpload .上传_错误上传_停止){返回；} var msgText='上传失败\ n '；开关（错误代码){ case SWFUpload .上传_错误HTTP_ERROR: msgText='HTTP错误\ n ' errorMsg打破；案例SWFUpload .上传_错误. MISSING _ UPLOAD _ URL : MSgtext='上传文件丢失，请重新上传；打破；案例SWFUpload .上传_错误IO_ERROR: msgText='IO错误；打破；案例SWFUpload .上传_错误“SECURITY_ERROR: msgText=”安全性错误\ n ' errorMsg打破；案例SWFUpload .上传_错误“UPLOAD _ LIMIT _ exced : msg text=”每次最多上传' this.settings.uploadLimit '个；打破；案例SWFUpload .上传_错误UPLOAD _ failed :消息文本=错误消息；打破；案例SWFUpload .上传_错误“指定的文件标识找不到：消息文本=”找不到指定文件，请重新操作；打破；案例SWFUpload .上传_错误“FILE _ VALIDATION _ failed : msg text=”参数错误；打破；'' default: msgText='文件： "文件。名称" \ n错误码："错误代码" \n "错误消息" \n "错误字符串";} alert(MSgtext)；} //返回参数；//} var uploadify _ onUploadSuccess=函数（文件、数据、响应){ alert(file.name '\n\n上传成功');};收工！

原文链接：http://博客。csdn。net/hwt _ 211/article/details/36888763

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。