JQuery与springmvc实现多个文件上传操作
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
本文由我司收集整编,推荐下载,如有疑问,请与我司联系
JQuery 与springmvc 实现多个文件上传操作
1. 导入JQuery 相关JS 文件
script src=“ @full_path path=“js/jquery.js”/“type=“text/javascript” /script
script src=“ @full_path path=“js/ajaxfileupload.js”/“type=“text/javascript” /script
这边ajaxfileupload.js 有点特殊,请使用如下改造后的原文件内容:
jQuery.extend({ var frameId = ‘jUploadFrame’ + id; var iframeHtml = ‘ iframe id=“‘ + frameId + ‘“name=“‘+ frameId + ‘“‘;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) //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));