ajaxfileupload多文件上传 - 修复只支持单个文件上传的bug
搜索:
jquery ajaxFileUpload
AjaxFileUpload同时上传多个文件
原生的AjaxFileUpload插件是不支持多文件上传的,通过修改AjaxFileUpload少量代码就能实现多文件同时上传
AjaxFileUpload插件修复前代码
- jQuery.extend({
- createUploadIframe: function(id, uri)
- {
- //create frame
- var frameId = 'jUploadFrame' + id;
- var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
- if(window.ActiveXObject)
- {
- if(typeof uri== 'boolean'){
- iframeHtml += ' src="' + 'javascript:false' + '"';
- }
- else if(typeof uri== 'string'){
- iframeHtml += ' src="' + uri + '"';
- }
- }
- iframeHtml += ' />';
- jQuery(iframeHtml).appendTo(document.body);
- return jQuery('#' + frameId).get(0);
- },
- createUploadForm: function(id,fileElementId,data,fileElement)
- {
- //create form
- var formId = 'jUploadForm' + id;
- var fileId = 'jUploadFile' + id;
- var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
- if(data)
- {
- for(var i in data)
- {
- jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
- }
- }
- var oldElement;
- if(fileElement == null)
- oldElement = jQuery('#' + fileElementId);
- else
- oldElement = fileElement;
- var newElement = jQuery(oldElement).clone();
- jQuery(oldElement).attr('id', fileId);
- jQuery(oldElement).before(newElement);
- jQuery(oldElement).appendTo(form);
- //set attributes
- jQuery(form).css('position', 'absolute');
- jQuery(form).css('top', '-1200px');
- jQuery(form).css('left', '-1200px');
- jQuery(form).appendTo('body');
- return form;
- },
- ajaxFileUpload: function(s) {
- // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout
- s = jQuery.extend({}, jQuery.ajaxSettings, s);
- var id = new Date().getTime()
- var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data),s.fileElement);
- var io = jQuery.createUploadIframe(id, s.secureuri);
- var frameId = 'jUploadFrame' + id;
- var formId = 'jUploadForm' + id;
- // Watch for a new set of requests
- if ( s.global && ! jQuery.active++ )
- {
- jQuery.event.trigger( "ajaxStart" );
- }
- var requestDone = false;
- // Create the request object
- var xml = {}
- if ( s.global )
- jQuery.event.trigger("ajaxSend", [xml, s]);
- // Wait for a response to come back
- var uploadCallback = function(isTimeout)
- {
- var io = document.getElementById(frameId);
- try
- {
- if(io.contentWindow)
- {
- xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
- xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
- }else if(io.contentDocument)
- {
- xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
- xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
- }
- }catch(e)
- {
- jQuery.handleError(s, xml, null, e);
- }
- if ( xml || isTimeout == "timeout")
- {
- requestDone = true;
- var status;
- try {
- status = isTimeout != "timeout" ? "success" : "error";
- // Make sure that the request was successful or notmodified
- if ( status != "error" )
- {
- // process the data (runs the xml through httpData regardless of callback)
- var data = jQuery.uploadHttpData( xml, s.dataType );
- // If a local callback was specified, fire it and pass it the data
- if ( s.success )
- s.success( data, status );
- // Fire the global callback
- if( s.global )
- jQuery.event.trigger( "ajaxSuccess", [xml, s] );
- } else
- jQuery.handleError(s, xml, status);
- } catch(e)
- {
- status = "error";
- jQuery.handleError(s, xml, status, e);
- }
- // The request was completed
- if( s.global )
- jQuery.event.trigger( "ajaxComplete", [xml, s] );
- // Handle the global AJAX counter
- if ( s.global && ! --jQuery.active )
- jQuery.event.trigger( "ajaxStop" );
- // Process result
- if ( s.complete )
- s.complete(xml, status);
- jQuery(io).unbind()
- setTimeout(function()
- { try
- {
- jQuery(io).remove();
- jQuery(form).remove();
- } catch(e)
- {
- jQuery.handleError(s, xml, null, e);
- }
- }, 100)
- xml = null
- }
- }
- // Timeout checker
- if ( s.timeout > 0 )
- {
- setTimeout(function(){
- // Check to see if the request is still happening
- if( !requestDone ) uploadCallback( "timeout" );
- }, s.timeout);
- }
- try
- {
- var form = jQuery('#' + formId);
- jQuery(form).attr('action', s.url);
- jQuery(form).attr('method', 'POST');
- jQuery(form).attr('target', frameId);
- if(form.encoding)
- {
- jQuery(form).attr('encoding', 'multipart/form-data');
- }
- else
- {
- jQuery(form).attr('enctype', 'multipart/form-data');
- }
- jQuery(form).submit();
- } catch(e)
- {
- jQuery.handleError(s, xml, null, e);
- }
- jQuery('#' + frameId).load(uploadCallback);
- return {abort: function(){
- try
- {
- jQuery('#' + frameId).remove();
- jQuery(form).remove();
- }
- catch(e){}
- }};
- },
- uploadHttpData: function( r, type ) {
- var data = !type;
- data = type == "xml" || data ? r.responseXML : r.responseText;
- // If the type is "script", eval it in global context
- if ( type == "script" )
- jQuery.globalEval( data );
- // Get the JavaScript object, if JSON is used.
- if ( type == "json" )
- eval( "data = " + data );
- // evaluate scripts within html
- if ( type == "html" )
- jQuery("<div>").html(data).evalScripts();
- return data;
- },
- handleError: function( s, xml, status, e ) {
- // If a local callback was specified, fire it
- if ( s.error )
- s.error( xml, status, e );
- // Fire the global callback
- if ( s.global )
- jQuery.event.trigger( "ajaxError", [xml, s, e] );
- }
- });
AjaxFileUpload插件修复后代码
- jQuery.extend({
- createUploadIframe: function(id, uri)
- {
- //create frame
- var frameId = 'jUploadFrame' + id;
- var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
- if(window.ActiveXObject)
- {
- if(typeof uri== 'boolean'){
- iframeHtml += ' src="' + 'javascript:false' + '"';
- }
- else if(typeof uri== 'string'){
- iframeHtml += ' src="' + uri + '"';
- }
- }
- iframeHtml += ' />';
- jQuery(iframeHtml).appendTo(document.body);
- return jQuery('#' + frameId).get(0);
- },
- createUploadForm: function(id,fileElementId,data,fileElement)
- {
- //create form
- var formId = 'jUploadForm' + id;
- var fileId = 'jUploadFile' + id;
- var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
- if(data)
- {
- for(var i in data)
- {
- jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
- }
- }
- for (var i = 0; i < fileElementId.length; i ++) {
- var oldElement = jQuery('#' + fileElementId[i]);
- var newElement = jQuery(oldElement).clone();
- jQuery(oldElement).attr('id', fileElementId[i]);
- jQuery(oldElement).attr('name', fileElementId[i]);
- jQuery(oldElement).before(newElement);
- jQuery(oldElement).appendTo(form);
- }
- //set attributes
- jQuery(form).css('position', 'absolute');
- jQuery(form).css('top', '-1200px');
- jQuery(form).css('left', '-1200px');
- jQuery(form).appendTo('body');
- return form;
- },
- ajaxFileUpload: function(s) {
- // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout
- s = jQuery.extend({}, jQuery.ajaxSettings, s);
- var id = new Date().getTime()
- var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data),s.fileElement);
- var io = jQuery.createUploadIframe(id, s.secureuri);
- var frameId = 'jUploadFrame' + id;
- var formId = 'jUploadForm' + id;
- // Watch for a new set of requests
- if ( s.global && ! jQuery.active++ )
- {
- jQuery.event.trigger( "ajaxStart" );
- }
- var requestDone = false;
- // Create the request object
- var xml = {}
- if ( s.global )
- jQuery.event.trigger("ajaxSend", [xml, s]);
- // Wait for a response to come back
- var uploadCallback = function(isTimeout)
- {
- var io = document.getElementById(frameId);
- try
- {
- if(io.contentWindow)
- {
- xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
- xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
- }else if(io.contentDocument)
- {
- xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
- xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
- }
- }catch(e)
- {
- jQuery.handleError(s, xml, null, e);
- }
- if ( xml || isTimeout == "timeout")
- {
- requestDone = true;
- var status;
- try {
- status = isTimeout != "timeout" ? "success" : "error";
- // Make sure that the request was successful or notmodified
- if ( status != "error" )
- {
- // process the data (runs the xml through httpData regardless of callback)
- var data = jQuery.uploadHttpData( xml, s.dataType );
- // If a local callback was specified, fire it and pass it the data
- if ( s.success )
- s.success( data, status );
- // Fire the global callback
- if( s.global )
- jQuery.event.trigger( "ajaxSuccess", [xml, s] );
- } else
- jQuery.handleError(s, xml, status);
- } catch(e)
- {
- status = "error";
- jQuery.handleError(s, xml, status, e);
- }
- // The request was completed
- if( s.global )
- jQuery.event.trigger( "ajaxComplete", [xml, s] );
- // Handle the global AJAX counter
- if ( s.global && ! --jQuery.active )
- jQuery.event.trigger( "ajaxStop" );
- // Process result
- if ( s.complete )
- s.complete(xml, status);
- jQuery(io).unbind()
- setTimeout(function()
- { try
- {
- jQuery(io).remove();
- jQuery(form).remove();
- } catch(e)
- {
- jQuery.handleError(s, xml, null, e);
- }
- }, 100)
- xml = null
- }
- }
- // Timeout checker
- if ( s.timeout > 0 )
- {
- setTimeout(function(){
- // Check to see if the request is still happening
- if( !requestDone ) uploadCallback( "timeout" );
- }, s.timeout);
- }
- try
- {
- var form = jQuery('#' + formId);
- jQuery(form).attr('action', s.url);
- jQuery(form).attr('method', 'POST');
- jQuery(form).attr('target', frameId);
- if(form.encoding)
- {
- jQuery(form).attr('encoding', 'multipart/form-data');
- }
- else
- {
- jQuery(form).attr('enctype', 'multipart/form-data');
- }
- jQuery(form).submit();
- } catch(e)
- {
- jQuery.handleError(s, xml, null, e);
- }
- jQuery('#' + frameId).load(uploadCallback);
- return {abort: function(){
- try
- {
- jQuery('#' + frameId).remove();
- jQuery(form).remove();
- }
- catch(e){}
- }};
- },
- uploadHttpData: function( r, type ) {
- var data = !type;
- data = type == "xml" || data ? r.responseXML : r.responseText;
- // If the type is "script", eval it in global context
- if ( type == "script" )
- jQuery.globalEval( data );
- // Get the JavaScript object, if JSON is used.
- if ( type == "json" )
- eval( "data = " + data );
- // evaluate scripts within html
- if ( type == "html" )
- jQuery("<div>").html(data).evalScripts();
- return data;
- },
- handleError: function( s, xml, status, e ) {
- // If a local callback was specified, fire it
- if ( s.error )
- s.error( xml, status, e );
- // Fire the global callback
- if ( s.global )
- jQuery.event.trigger( "ajaxError", [xml, s, e] );
- }
- });
多文件上传实例
js代码
- //上传账单
- function uploadBill(){
- var clincId=$("#clCode").val();
- var phoneNo=$("#phone-number").val();
- var telreg = /^(((1))+\d{10})$/;
- var clincDate=$("#clinic-time").val();
- clincDate = clincDate.replace(/\//g,"-");
- var spendAmount=$("#total-sum").val();
- var params = {"clincId":clincId, "phoneNo":phoneNo, "clincDate":clincDate, "spendAmount":spendAmount};
- var files = new Array();
- files.push('file1');//文件input id1
- files.push('file2');//文件input id2
- var jc = $.confirm({
- content: '上传中...',
- title: '提示',
- confirmButton: false,
- cancelButton: false,
- closeIcon: false
- });
- $.ajaxFileUpload({
- url : contextPath + '/auth/uploadBill',// 调取上传到本地的方法
- secureuri : false,
- async : true,
- fileElementId : files,
- type : 'post',
- dataType : 'json',
- data : params,
- success : function(data, status) {
- if(data.status == 'success'){
- jc.close();
- remind("上传成功,等待审核");
- }
- },
- error : function(data, status, e) {
- jc.close();
- remind("上传失败!");
- }
- });
- }
java代码
- /**
- * 上传账单
- * @return
- * @throws Exception
- */
- @SuppressWarnings("unused")
- @RequestMapping("/uploadBill")
- @ResponseBody
- public void uploadBill(HttpServletRequest request, HttpServletResponse response) throws Exception {
- MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
- List<MultipartFile> uploadFiles = new ArrayList<>();
- Map parameterMap = multipartRequest.getParameterMap();
- Map<String,String> responseMap = new HashMap<>();
- Map<String, String> params = new HashMap<>();
- Set<String> keySet = parameterMap.keySet();
- for (String key : keySet) {
- String[] values = (String[])parameterMap.get(key);
- params.put(key, values[0]);
- }
- ClientUser userInfo = getUserInfo();
- params.put("openid", userInfo.getOpenid());
- //用户就诊记录校验,通过预约记录进行匹配校验
- //TODO
- //支持同时上传多个文件
- Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
- Collection<MultipartFile> files = fileMap.values();
- uploadFiles.addAll(files);
- StringBuffer originalImageUrl = new StringBuffer();
- StringBuffer compressImageUrl = new StringBuffer();
- for (MultipartFile multipartFile : uploadFiles) {
- if (!multipartFile.isEmpty()) {
- String originalFilename = multipartFile.getOriginalFilename();
- while(originalFilename.length() > 30){//剪切文件名,防止过长
- originalFilename = originalFilename.substring(20, originalFilename.length());
- }
- String generateName = FileUtils.getGenerateFileName(originalFilename);
- String fileDir = "C:/upload/clinic/bill/";
- String filePath = fileDir + generateName;
- originalImageUrl.append(filePath+",");
- File file = new File(filePath);
- File dirFile = new File(filePath);
- if (!dirFile.exists()) {
- dirFile.mkdirs();
- }
- multipartFile.transferTo(file);
- String compressImgPath = filePath.replace(".", "_CompressImg.");
- compressImageUrl.append(compressImgPath+",");
- //将图片进行压缩,手机端展示压缩后的图片,同时保留原图在管理端审核展示
- FileUtils.compressImg(filePath, compressImgPath, 0.5f);
- }
- }
- params.put("imageUrl", originalImageUrl.substring(0, originalImageUrl.length()-1));
- params.put("compressImageUrl", compressImageUrl.substring(0, compressImageUrl.length()-1));
- insurFacade.saveBill(params);
- responseMap.put("status", "success");
- responseMap.put("msg", "");
- response.setContentType("text/html;charset=utf-8");
- response.setHeader("Cache-Control", "no-cache");
- PrintWriter out = response.getWriter();
- out.print(JsonUtils.toJsonString(responseMap));
- }
全文完
:)
参考:
https://www.cnblogs.com/wkrbky/p/6228779.html
https://www.cnblogs.com/zhanghaoliang/p/6513964.html
https://blog.csdn.net/llxinlan/article/details/79047006
https://blog.csdn.net/wei_ge163/article/details/8265247
https://blog.csdn.net/zwx19921215/article/details/44133113
https://blog.csdn.net/jadyer/article/details/11693705
https://blog.csdn.net/zhanglu201112/article/details/17039137
https://www.cnblogs.com/itjeff/p/9372100.html
https://www.cnblogs.com/donchen/p/7798075.html
https://blog.csdn.net/w405722907/article/details/75089056
https://blog.csdn.net/u013082782/article/details/50106437
https://blog.csdn.net/sinat_25712187/article/details/80624316(clone(true)这个方案试了没有解决)
https://blog.csdn.net/u014656173/article/details/77017352
版权声明:本文为博主原创文章,未经博主允许不得转载。原文地址:https://www.cnblogs.com/poterliu/p/9776663.html 联系邮箱:poterliu@qq.com 联系微信:poterliu 或者扫二维码 |
ajaxfileupload多文件上传 - 修复只支持单个文件上传的bug的更多相关文章
- Jquery图片上传组件,支持多文件上传
Jquery图片上传组件,支持多文件上传http://www.jq22.com/jquery-info230jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传.取消. ...
- ZIP解压缩文件的工具类【支持多级文件夹|全】
ZIP解压缩文件的工具类[支持多级文件夹|全] 作者:Vashon 网上有非常多的加压缩演示样例代码.可是都仅仅是支持一级文件夹的操作.假设存在多级文件夹的话就不行了. 本解压缩工具类经过多次检查及重 ...
- 表单多文件上传样式美化 && 支持选中文件后删除相关项
开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进 ...
- JS实现表单多文件上传样式美化支持选中文件后删除相关项
http://www.youdaili.net/javascript/5903.html
- ajaxFileUpload.js插件支持多文件上传的方法
前提条件:ajaxFileUpload.js插件多文件上传步骤:1.修改源码,(源码只支持单个文件的上传):复制代码 代码如下: //修改前代码------- //var oldElement = j ...
- Thinkphp5+plupload图片上传功能,支持实时预览图片。
今天和大家分享一个国外的图片上传插件,这个插件支持分片上传大文件.其中著名的七牛云平台的jssdk就使用了puupload插件,可见这个插件还是相当牛叉的. 这个插件不仅仅支持图片上传,还支持大多数文 ...
- 前端上传视频、图片、文件等大文件 组件Plupload使用指南
demo:https://blog.csdn.net/qq_30100043/article/details/78491993 Plupload上传插件中文帮助文档网址:http://www.phpi ...
- sruts2:单个文件上传,多个文件上传(属性驱动)
文件上传功能在Struts2中得到了很好的封装,主要使用fileUpload上传组件. 1. 单个文件上传 1.1 创建上传单个文件的JSP页面.显示提交结果的JSP页面 uploadTest1.js ...
- 解剖SQLSERVER 第八篇 OrcaMDF 现在支持多数据文件的数据库(译)
解剖SQLSERVER 第八篇 OrcaMDF 现在支持多数据文件的数据库(译) http://improve.dk/orcamdf-now-supports-databases-with-mult ...
随机推荐
- nopcommerce3.6中文包
nopCommerce 语言包,xml文件 点击下载:3.60_language_pack_zh.rar (60.82 kb) 下载后解压通过后台导入即可使用.如何导入?点击这里
- java分页三个类 PageBean ResponseUtil StringUtil
package ssmy.page; /** * 分页类 * @author Jesse * */public class PageBean { private int page;//第几页 priv ...
- html实现钝角效果;html实现限制一行字数的显示,超出的部分用省略号(....)来代替
前端实现div框边角的钝化虽然简单,但是有时候突然想不到,特此写下几句实现方法,以便记忆. 实现div框四个角都钝角的操作:设置 div : border-radius=10px; 实现div框一个角 ...
- Python开发环境Wing IDE如何检查Python集成
在使用Wing IDE开始代码编辑之前,必须先确保Wing IDE已经成功地找到用户的Python安装位置(如果用户同时安装有多个版本,那么Wing IDE将有限选择最新版).要对这个进行检查,需要调 ...
- SpringCloud的学习记录(4)
本篇基于上一篇写的, 在git上更改配置后, eureka-client如何更新. 我们只需要在配置文件中配置 spring-cloud-starter-bus-amqp; 这就是说我们需要装rabb ...
- MyEclipse内存溢出问题
今天碰到的问题,先记录下来 Console报错: Java.lang.OutOfMemoryError: PermGen space 跟着步骤: 在这里加入:-Xms800m -Xmx800m -XX ...
- Zamplus 晶赞天机
类型: 定制服务 软件包: car/vehicle integrated industry solution collateral tourism 联系服务商 产品详情 解决方案 概要 DMP:通常称 ...
- Extjs4几个小知识点
1.Why user "var me=this" in Extjs4?有个英文解释很好: Say you have a method in your object A which ...
- Office加载项对Excel进行读写操作
转载自我的个人主页 前言 在开发ExcelWeb插件的时候,一大亮点就是可以在web项目中操作Excel,读取Excel的内容,也可以将服务端的数据写入的 Excel中,大大方便的用户使用Excel, ...
- 利用ASP.NET里自带的站点地图工具制作网站站点地图
站点地图很方便能快速给我们导航我们要去访问的地址,能按层级关系分门别类,给用户一个很好的用户体验,很好的看到自己当前所在的网站位置 站点地图,又称网站地图,它就是一个页面,上面放置了网站上所有页面的链 ...