Javascript使用uploadify来实现多文件上传
更新时间:2016年11月22日 07:51 点击:2378
使用uploadify来实现文件上传能够客户端判断文件大小、控制文件上传的类型、实现多文件上传、显示进度条等功能,方便易用,兼容性较好。
本例是把dwz中整合uploadify功能抽取出来的,可以进行单独使用,不一定要遭dwz中才能使用,本例只是为了测试,所以使用静态页面进行测试:
话不多说,代码敬上:
2,html页面的代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>MyHtml.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link href="resources/dwz/uploadify/css/uploadify.css" rel="stylesheet" type="text/css" media="screen" /> <script src="resources/dwz/js/jquery-1.7.2.js" type="text/javascript"></script> <script src="resources/dwz/uploadify/scripts/jquery.uploadify.js" type="text/javascript"></script> <script src="resources/dwz/uploadify/scripts/errorCode.js" type="text/javascript"></script> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <style type="text/css" media="screen"> .my-uploadify-button { background: none; border: none; text-shadow: none; border-radius: 0; } .uploadify:hover .my-uploadify-button { background: none; border: none; } .fileQueue { width: 400px; height: 150px; overflow: auto; border: 1px solid #E5E5E5; margin-bottom: 10px; } </style> <script type="text/javascript"> $(function(){ $('#testFileInput').uploadify({ swf:'resources/dwz/uploadify/scripts/uploadify.swf', uploader:'servlet/uploadify.do',//上传的url formData:{PHPSESSID:'xxx', ajax:1}, buttonText:'请选择文件', fileSizeLimit:'200KB',//设置上传大小 fileTypeDesc:'*.jpg;*.jpeg;*.gif;*.png;', fileTypeExts:'*.jpg;*.jpeg;*.gif;*.png;',//允许的后缀 auto:true,//是否自动上传 multi:true, overrideEvents: ['onDialogClose', 'onUploadError', 'onSelectError' ],//重新错误信息的显示方法 onSelectError: uploadify_onSelectError, onUploadError: uploadify_onUploadError, onUploadSuccess: uploadify_onUploadSuccess }); $('#testFileInput2').uploadify({ swf:'resources/dwz/uploadify/scripts/uploadify.swf', uploader:'servlet/uploadify.do', formData:{PHPSESSID:'xxx', ajax:1}, queueID:'fileQueue', buttonImage:'resources/dwz/uploadify/img/add.jpg', buttonClass:'my-uploadify-button', width:102, auto:false, fileSizeLimit:'100KB', fileTypeDesc:'*.jpg;*.jpeg;*.gif;*.png;', fileTypeExts:'*.jpg;*.jpeg;*.gif;*.png;', overrideEvents: [ 'onDialogClose','onUploadError', 'onSelectError' ], onSelectError: uploadify_onSelectError, onUploadError: uploadify_onUploadError, onUploadSuccess: uploadify_onUploadSuccess }); }); </script> </head> <body> <!-- 单文件上传 --> <input id="testFileInput" type="file" name="image" /> <div class="divider"></div> <!-- 多文件上传 --> <input id="testFileInput2" type="file" name="image2" /> <div id="fileQueue" class="fileQueue"></div> <input type="image" src="resources/dwz/uploadify/img/upload.jpg" onclick="$('#testFileInput2').uploadify('upload', '*');" /> <input type="image" src="resources/dwz/uploadify/img/cancel.jpg" onclick="$('#testFileInput2').uploadify('cancel', '*');" /> </body> </html>
3,上传的servlet代码
package uploadFile; import java.io.File; import java.io.IOException; import java.util.Iterator; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.FileUploadException; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; public class UploadFile extends HttpServlet { @Override protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { super.service(request, response); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //临时目录 String basePath = req.getServletContext().getRealPath("upload"); String tempDir = "temp"; File tempFile = new File(basePath + File.separator +tempDir); if (!tempFile.exists()) { tempFile.mkdir(); } DiskFileItemFactory dfc = new DiskFileItemFactory(); dfc.setSizeThreshold(1*1024*1024);//设置临界值 dfc.setRepository(tempFile);//设置临时上传目录 ServletFileUpload upload = new ServletFileUpload(dfc); upload.setHeaderEncoding("UTF-8");//设置编码 // 设置文件最大值,这里设置5Mb,5*1024*1024; upload.setSizeMax(5 * 1024 * 1024); try { List fileList = upload.parseRequest(req); Iterator<FileItem> iterator = fileList.iterator(); while (iterator.hasNext()) { FileItem item = iterator.next(); String fileName = item.getName();//得到文件名 if (fileName != null) { //System.out.println(fileName); //System.out.println(item.getSize()); File sourceFile = new File(basePath+File.separator+fileName); item.write(sourceFile); } } } catch (FileUploadException e) { e.printStackTrace(); } catch (Exception e) { e.printStackTrace(); } //resp.getWriter().print("上传成功!"); } @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { super.doPost(req, resp); } }
4,web.xml配置
<servlet> <servlet-name>upLoadify</servlet-name> <servlet-class>uploadFile.UploadFile</servlet-class> </servlet> <servlet-mapping> <servlet-name>upLoadify</servlet-name> <url-pattern>/servlet/uploadify.do</url-pattern> </servlet-mapping>
5,uploadify的提示信息是英文的,为了显示中文的提示信息,将其错误提示方法进行重新,新建errorCode.js放入在resource/dwz/uploadify/scripts文件夹下面,并在页面进行导入这个js,js代码如下:
var uploadify_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); }; var uploadify_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); } // return parameters; //} var uploadify_onUploadSuccess = function(file, data, response) { alert(file.name + "\n\n上传成功"); };
收工!
原文链接:http://blog.csdn.net/hwt_211/article/details/36888763
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要介绍了smartupload实现文件上传时获取表单数据的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2017-01-09
BootStrap Progressbar 实现大文件上传的进度条的实例代码
这篇文章主要介绍了BootStrap Progressbar 实现大文件上传的进度条的实例代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-01- 这篇文章主要介绍了Node.js程序中的本地文件操作用法小结,作为运行在服务器端的JavaScript解释器,Node中自然拥有操作本地文件的方法,需要的朋友可以参考下...2016-03-09
- 这篇文章主要介绍了HTML5实现微信拍摄上传照片功能,实现HTML5 Canvas手机拍摄,本地压缩上传图片时遇到问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-04-27
使用jQuery ajaxupload插件实现无刷新上传文件
项目中会经常用到AJAX无刷新上传图片,但是iframe上传和flash插件都是比较复杂的,所以就找了一个jquery的插件。下面通过实例代码给大家介绍使用jQuery ajaxupload插件实现无刷新上传文件功能,需要的朋友参考下吧...2017-04-27jquery插件uploadify实现带进度条的文件批量上传
这篇文章主要介绍了jquery插件uploadify实现带进度条的文件批量上传,感兴趣的小伙伴们可以参考一下...2015-12-14- 这篇文章主要介绍了又拍云异步上传实例教程详解的相关资料,需要的朋友可以参考下...2016-04-23
- 这篇文章主要介绍了WordPress后台中实现图片上传功能的实例讲解,包括多个图片上传表单功能的实现,需要的朋友可以参考下...2016-01-14
- Uploadify是一款比较有人气的页面上传插件,Uploadify使用简单而且可定制性较高,接下来我们就一起来看下这款基于jQuery的Web上传插件Uploadify使用示例...2016-05-20
- 本篇文章主要介绍了Javascript使用uploadify来实现多文件上传,具有一定的参考价值,有需要的可以了解一下。 ...2016-11-22
- 这篇文章主要介绍了jquery Form轻松实现文件上传的相关过程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-27
- 这篇文章主要为大家详细介绍了JS实现异步上传压缩图片,并立即显示图片,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-04-27
- 这篇文章主要介绍了PHP实现文件上传下载实例,本文详细全面的讲解了文件上传相关的需求分析及功能实现,并同时给出了使用代码,需要的朋友可以参考下。 PHP实现文件上传与下载...2016-10-20
- 这篇文章主要为大家详细介绍了H5图片压缩与上传的实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-04-27
- 下面小编就为大家带来一篇mysql查询结果输出到文件的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-01-15
jQuery uploadify在谷歌和火狐浏览器上传失败的解决方案
jquery.uploadify插件是一个基于jquery来实现上传的,这个插件很好用,每一次向后台发送数据流请求时,ie会自动把本地cookie存储捆绑在一起发送给服务器。但firefox、chrome不会这样做,他们会认为这样不安全,下面介绍下jQuery uploadify上传失败的解决方案...2020-06-25- 这篇文章主要介绍了PHP文件操作技巧之获取目录下文件与计算相对路径的方法,其中获取目录下文件方面分为包含子目录和不包含子目录两种情况,需要的朋友可以参考下...2016-01-12
- 下面小编就为大家带来一篇PHP中读取文件的几个方法总结(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-06-12
Nginx配置txt、pdf、doc、xls等文件直接下载的方法
这篇文章主要介绍了Nginx配置txt、pdf、doc、xls等文件直接下载的方法,配置方法很简单,本文直接给出配置示例,需要的朋友可以参考下...2016-01-27