Combined with Struts2, AjaxFileUpload implements Multifile upload (Dynamic File Upload box ),
Previous Article: http://www.bkjia.com/article/124489.htmintroduces how to upload multiple files in ajaxfileupload,
But it is only a fixed number of files. If you are not sure how many files are required, you need to dynamically add File Upload boxes to achieve flexibility.
The basic framework of the previous article remains unchanged, and the main changes are as follows:
1. jQuery implements dynamic addition and deletion of File Upload boxes
2. Obtain the ID of the file upload box.
3. In ajaxfileupload. js, convert the ID array to the desired Object array.
Solve the above problems in sequence
1. dynamically add and delete file upload boxes
<Body> <form action = "" enctype = "multipart/form-data"><Script type = "text/javascript"> // Add the attachment 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 +"); '> Delete </a> </div> "; $ (" # add "). after (inputFile);} // Delete the attachment function delFile (id) {$ ("# addFile" + id ). remove () ;}</script>2. Get the ID of the file upload box
Because we do not know how many upload boxes there are, each time we add an upload box, the id attribute is incremental in the file1, file2 mode.
You can use each to concatenate characters cyclically.
Var files = ""; // obtain the id attribute values of all <input type = "file" ID = "file1" name = "file"/> $ ("input [name = file]"). each (function () {files = files + $ (this ). attr ("id") + "," ;}) // truncate the last comma (,) from the character files = files. substring (0, files. length-1 );The files values we get are as follows:
var files = "file1,file2,file3";Available
console.info(typeof(files));Check that files is of the string type.3. In ajaxfileupload. js, convert the ID array to the desired Object array.
Because what we need is
var files = ['file1','file2','file3'];Instead
var files = "file1,file2,file3";Therefore, you do not have to perform operations in ajaxfileupload. js.
You can convert the value when getting the ID and then pass the value. It doesn't matter where it is. The methods are the same.
Find the following code:
var oldElement = jQuery('#' + fileElementId); var newElement = jQuery(oldElement).clone(); jQuery(oldElement).attr('id', fileId); jQuery(oldElement).before(newElement); jQuery(oldElement).appendTo(form);Add the following code:
Var t = ''; if (typeof (fileElementId) = 'string') {/** converts the passed values such as:" file1, file2, file3 ": ['file1', 'file2', 'file3'] */var s = fileElementId. split (","); for (var I in s) {t = t + "'" + s [I] + "'" + ",";} t = "[" + t + "]"; t = t. replace (",]", "]")} fileElementId = eval ('+ t +'); // convert the string type to the Object typeEffect
In addition to the above Code, such as struts configuration, the Action does not need to be modified.
Project source code download: http://demo.jb51.net/js/2017/struts_ajaxfileupload2.rar
Summary
The above section describes how to use the AjaxFileUpload and Struts2 to upload multiple files (add a file upload box dynamically). I hope this will be helpful to you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
