搜索：
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 或者扫二维码 |