Combined with Struts2, AjaxFileUpload implements Multifile upload (Dynamic File Upload box ),

Source: Internet
Author: User

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";

Availableconsole.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 isvar files = ['file1','file2','file3'];

Insteadvar 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 type

Effect

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!

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.