上篇文章https://www.jb51.net/article/124489.htm介紹了ajaxfileupload實(shí)現(xiàn)多文件上傳，
但只是固定的文件個(gè)數(shù)，如果需求不確定是多少文件 則我們就需要?jiǎng)討B(tài)的添加文件上傳框，以實(shí)現(xiàn)靈活性。
基于上篇基本框架是不變的，主要修改以下幾個(gè)方面
1、jQuery實(shí)現(xiàn)動(dòng)態(tài)添加刪除文件上傳框
2、獲取文件上傳框的ID
3、ajaxfileupload.js里將ID數(shù)組轉(zhuǎn)換為需要的Object數(shù)組
依次解決上面問題
一、實(shí)現(xiàn)動(dòng)態(tài)添加刪除文件上傳框
body>
form action="" enctype="multipart/form-data">
h2>
多文件上傳
/h2>
input type="file" id="file1" name="file" />a id="add" href="javascript:void();" rel="external nofollow" onclick="addFile();">添加/a>
span>
table id="down">
/table>
/span>
/br>
input type="button" onclick="fileUpload();" value="上傳">
/form>
/body>
script type="text/javascript">
//添加附件
function addFile(){
var fileLength = $("input[name=file]").length+1;
var inputFile = "div id='addFile"+fileLength+"'>input type='file' id='file"+fileLength+"' name='file' />"
+"a href='javascript:void();' onclick='delFile("+fileLength+");'>刪除/a>/div>";
$("#add").after(inputFile);
}
//刪除附件
function delFile(id){
$("#addFile"+id).remove();
}
/script>
二、獲取文件上傳框的ID
由于我們不知道有多少個(gè)上傳框,每次添加一個(gè)上傳框,其id屬性都是以file1,file2方式遞增的
可以用each循環(huán)拼接字符
var files = "";
//獲取所有 input type="file" id="file1" name="file" /> 的ID屬性值
$("input[name=file]").each(function(){
files = files + $(this).attr("id")+",";
})
//將字符最后一逗號(hào)(,)截取掉
files = files.substring(0,files.length-1);
然后我們獲取的files值 如：var files = "file1,file2,file3";
可以使用console.info(typeof(files));查看files為string類型
三、ajaxfileupload.js里將ID數(shù)組轉(zhuǎn)換為需要的Object數(shù)組
因?yàn)槲覀冃枰氖侵T如var files = ['file1','file2','file3'];
而不是var files = "file1,file2,file3";
所以需要進(jìn)行轉(zhuǎn)換，其實(shí)也未必非得在ajaxfileupload.js里進(jìn)行操作
完全可以在獲取ID時(shí)轉(zhuǎn)換好 再傳值過來。也無所謂在哪里了，方法都一樣。
還是找到以下代碼：
var oldElement = jQuery('#' + fileElementId);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);
在這段代碼之上添加如下：
var t = '';
if(typeof(fileElementId) == 'string'){
/*
* 將傳過來的值 如："file1,file2,file3" 轉(zhuǎn)換為：['file1','file2','file3']
*/
var s = fileElementId.split(",");
for(var i in s){
t = t + "'"+s[i]+"'"+",";
}
t = "["+t+"]";
t = t.replace(",]", "]")
}
fileElementId= eval('('+ t +')'); //將string類型轉(zhuǎn)換為Object類型
效果如圖：
除了以上代碼其他如struts配置,Action無需修改
項(xiàng)目源碼下載：http://demo.jb51.net/js/2017/struts_ajaxfileupload2.rar
總結(jié)
以上所述是小編給大家介紹的AjaxFileUpload結(jié)合Struts2實(shí)現(xiàn)多文件上傳(動(dòng)態(tài)添加文件上傳框)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:- 基于jquery ajax的多文件上傳進(jìn)度條過程解析
- 利用SpringMVC和Ajax實(shí)現(xiàn)文件上傳功能
- PHP實(shí)現(xiàn)帶進(jìn)度條的Ajax文件上傳功能示例
- php+ajax 文件上傳代碼實(shí)例
- AjaxUpLoad.js實(shí)現(xiàn)文件上傳
- AjaxUpLoad.js實(shí)現(xiàn)文件上傳功能
- php+ajax實(shí)現(xiàn)無刷新文件上傳功能(ajaxuploadfile)
- ajaxFileupload實(shí)現(xiàn)多文件上傳功能
- AjaxFileUpload+Struts2實(shí)現(xiàn)多文件上傳功能
- Ajax實(shí)現(xiàn)文件上傳功能(Spring MVC)
