Home > Developer > Web Develop
In the previous article,
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 boxBecause 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 );Then we get the files values, such as var files = "file1, file2, file3 ";You can use 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 we need such files as var files = ['file1', 'file2', 'file3'];
Instead of 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 type
EffectIn addition to the above Code, such as struts configuration, the Action does not need to be modified.
Project source code download: http://download.csdn.net/detail/itmyhome/7589939
Welcome to the JAVA technology exchange group: 74955800
Reprinted please indicate the source: http://blog.csdn.net/itmyhome1990/article/details/36433621
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
