Js implements the selection box for adding and deleting files to and from the uploaded files. js uploads files.

Js implements the selection box for adding and deleting files to and from the uploaded files. js uploads files.

This article describes how to use javascript to dynamically add and delete file selection boxes when uploading attachments, and then upload them all at once.

Theoretically, it is easy to implement, but there are still two difficulties in actual work. These difficulties are all caused by one reason, that is, browser compatibility. Two functions are used in the script: insertAdjacentHTML and removeChild, which happen to be unavailable in Firefox. After almost a day, I searched for a solution on the Internet, but I was found, which made me feel relieved.

The two functions are as follows:

<Script type = "text/javascript"> // select the function removeFile (id) {var new_tr = id. parentNode; try {// new_tr.removeNode (true); // just ie, not w3c; // other idea var tmp = new_tr.parentNode; // to ensure normal use in ie and firefox, instead of using another method, take the parent node at the top layer and remove it. tmp. removeChild (new_tr);} catch (e) {}} // Add a file selection box function addFile (id) {var str = '<div> <input type = "file" runat = "server" name = "file" onKeyDown = "this. blur (); "oncontextmenu =" return false "/> <input type =" button "value =" delete "style =" height: 22px; "onclick =" removeFile (this) "/> </div> 'inserthtml (" beforeend ", document. getElementById (id), str) ;}</script>

Reference on the page as follows:

<Div> <input type = "button" value = "Add attachment" onclick = "addFile ('myfile ') "> </div> <div id =" myfile "> </div>

The addFile function references another function: insertHtml. This function is mainly used to overwrite insertAdjacentHTML in firefox if it is invalid. You can find this function by searching insertAdjacentHTML.

PS:Clear the content in the file box

<Input type = file name = ttt> <input type = button onclick = "ttt.select(registrant.exe cCommand ('delete');" value = clear content in the file box>

Case 2

File Upload and deletion:

Start:

Click "select more" to add many selected files:

Click "delete:

Implementation Code:

<! DOCTYPE html> 
Code flaw :!!!! In the delete function, I chose to delete the first element node, instead of deleting the current button in the true sense. I don't know how to improve it, so I want to correct it.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.