Jquery tutorial (12) Multifile upload using less demanding Java Script code

Several months ago, when I was chasing the Ajax Craze on the internet, I found an innovative Java Script on the groovtyfoureleven website.CodeImplementation of the "single file element for multi-File Upload"Article.

So when I want to write "15 days of roaming jquery", the first thing I think of is to use jquery to implement this function.

Easy-to-use enthusiasts

A few days ago, when I checked my website records, I found a missing Article trackback. I found that my two jquery articles were cited by the author to prove why he hated Java Script.

According to this person, any tool or technology that doesn't put ease of use first will become junk.

Although I do not agree with this elder brother's attitude of killing him, he still reminds me of this detailed tutorial. When I write a simple web page, I will try my best to handle it with caution. In this way, if the visitor decides to disable the Java Script code execution function, they can still use the website function normally.

Two tutorials on the first value

• Use a single file input element to upload multiple files and make the interaction process smooth and comfortable.

• Make multi-file upload more user-friendly, but avoid sacrificing availability. The key lies in the use of less demanding Java Script code to create multi-file input areas.

Demo

• There is only one file input element, but jquery and other code are added to implement the multi-file upload function that is closer to the user.

Demo 1 Address

• Multiple file input elements are used in page (x) HTML code, but the display page effect is similar to that of the first demo through jquery. The advantage is that the Code is not harsh... Even if Java Script Execution is disabled, you can upload multiple files.

DEMO 2 address (this demo cannot be used due to a bug. The author corrected the bug and used this link to view the demo 2 address (no bug ))

Explanation

Single file input box

The $ (document). Ready () function of jquery has two functions:

Create a div element to display the maximum number of files allowed to be uploaded. Find the File Upload box (assuming there is only one) and attach an onchange event to it.

$("Input [@ type = file]").Change(Function(){Doit(This, Filemax)Bytes ;})Bytes ;
 

Doit () function (simple and memorable, haha ~) Check whether the maximum number of files is reached. If not, it hides the input box of the current file and adds a new input box to the parent Div, use the id "files_list" as the marker for the file name in the input box, and add the "delete" button at the end.

In the DOM tree navigation, I use the jquery parent () function and then use the remove () function to remove elements. I also used the append () and prepend () functions to add file names and new input boxes respectively.

Two key points

-Maximum number of file uploads:

 
VaR filemax =3Bytes ;
 

-The input box must have appropriate positioning measures:

"File"Class="Upload"Name ="Filex []"/>
 

In this case, the user determines whether to add or delete the input box. There is no operation on the ID or name. When the form code is sent to the server script, the related information is stored in an array.

Multi-file input box

First, the number of files that can be uploaded is determined by the number of file input boxes on the page. Second, you still need to use an array to store the content received by each input box in some way.

 
"File"Class="Upload"Name ="Filex []"/>
 

In the second demonstration, the biggest difference from the previous one is that I traversed each file input box and executed the doit () function when its content was changed. By traversing each input box, I can add useful additional information for my code: the order of the input box content in the "stack.

In other words, when the code is executed, it specifies the first input box, the second box, or the third box.

For the code, see:

$("Input [@ type = file]: nthoftype ("+ N +")")
 

Jquery's flexibility allows us to use CSS and XPath description statements to locate the specified Element location.

You will find that when a file is selected, the file input box will be overwritten by the file name. Click the file name to select different files.