The freshly baked jquery fileupload Plugin

Content is original, reproduced please indicate the source

Why do this stuff?

Project needs to use a multi-attachment upload control, find a lap did not find the favorite (the only one favorite point is not open source, the cost is relatively high), this does not have to own the knife.

What are the requirements

So what do you want to do with the stuff you upload?

Things that must be done:

1. Not too ugly, can be very vegetarian.

The native input file does not match the project body and needs to be managed differently.

2. Need to support uploading multiple attachments, such as the background has a field called the image material, this image material, perhaps is a positive photo, perhaps, there is a bunch of documents, need to support multiple.

3. Need a page to support a number of such controls, today there is an image material, tomorrow may come out a certificate, this no, it is two.

4. Need to be able to check the list, upload, download, delete

Some of the best things:

5. Real-Time progress bar

6. The attachment of the picture type can be previewed.

7. You can limit the types of attachments you upload.

8. Support configuration upload single or multiple

Above these things, one by one to chant.

How to start?

To do such a thing, at least to involve two pieces of content:

1. Front-end display

2. Back-end processing

Since our project uses spring, with jquery, then, from these two things to start, so, decided to do so:

1. Front-end customization of a jquery plugin

2. Background based on SPRINGMVC and Commons-fileupload-1.2.1.jar to achieve the specific upload of business

Gossip Morte, began to personalities.

The front-end plug-in stuff.

jquery is a good thing, to get a plug-in has very specific routines, directly to the top of the set is good, the key is, how to achieve the logic?

The previous project with the Flash plug-in, now that you do not want to rely on flash, then, with the form submitted to do it, the steps become such a child:

1. Invoke the background query interface when initializing, generate list, support download and delete on list.

2. Generate an input of type file at initialization and bind a Change event callback

3. In callback, a form and an IFRAME are generated dynamically, and the original file is moved to the new form, and another file is generated in the original location. Throw the form into the queue

4. If a task that is not currently committed exists, then a committed task is generated.

What are you doing in the task you're submitting?

There are several main things to do:

1. Are you currently submitting a form that has not been submitted successfully? If there is, continue with the following steps, if not, take an uncommitted form from the queue, commit, and if the queue is empty, the task ends.

2. Has the content of the destination (IFRAME) of the currently submitted form changed (by detecting a specific DOM)? If a change has occurred, the submission has been completed and the process of entry has ended. If it doesn't change, then take the progress bar.

2.1 Submission is over, see, success or failure? Succeeded, set the progress bar, generate the Delete button, and start with the first step. Failed, prompting the upload failed.

2.2 Commit not finished, call the interface take off the progress, and at the same time, 500 milliseconds from the first step to start again.

Well, all the logic in the front is basically here.

Back end of those things

Now that you've used Commons-fileupload-1.2.1.jar, just do the following:

1. New class Uploadprogresslistener implementation Progresslistener interface, in the implementation class of the interface, first from the URL in accordance with the rules to parse out the Uploadid parameters, and then to the session such as the uploadid corresponding progress.

The session has a map,key for uploadid,value as a progress value.
2. Inherit Commonsmultipartresolver implements a class xx.xx.xx.CommonsMultipartResolver, which is monitored by injecting a progress bar in the implementation class by a code similar to the following:

      String encoding = determineencoding (request);       = preparefileupload (encoding);       New Uploadprogresslistener (request);      Fileupload.setprogresslistener (Plistener);

View Code

3. In the spring configuration file, configure the Multipartresolver as the newly implemented class in the previous step:

<id= "Multipartresolver"  class= " Xx.xx.xx.CommonsMultipartResolver "  p:defaultencoding=" UTF-8 ">

Well, that's almost it. just, there's a bigger hole in it :

The parameter of the request received in this class of Uploadprogresslistener is always empty. To wait until this step is done, the request parameter is value, so that the parameter that supports multiple attachment uploads is uploadid. Finally, thanks to MVC's support for parameters in the URL, the uploaded URL becomes:

@RequestMapping (value= "/file/{uploadid}/upload.json")

In this way, the value of Uploadid can be resolved after the rule has been Getrequesturi () in the request.

It's almost ready to finish.

It's written out of the question.

When using, also pay attention to what the following things:

1. Background storage attachments need such a relational table, which holds at least file_group_id,file_id,file_name,file_path,file_size data.

2. control based on jquery 1.7.2, no other version tested

3. When configuring the control to upload, add, delete, download, and get the action of the progress bar, note that the relative engineering root configuration is required, do not bring/
4. The action of the control needs to return the JSON data, the following should be noted:
A. The new JSON returned is in the following format, at least the Fileid and Filegroupid fields need to be returned:
　　

{model_list:[{"file_group_id": "XXXXX", "file_id": "XXXXXXX"}]}

Also, note that when returning, you need to set the header information for the returned data to Html,java:

　　

Response.setcontenttype ("Text/html;charset=utf-8");

B. Delete when the background through the parameter file_id receive the file number to delete, do not throw exception is considered to be deleted success

C. Download the background through the parameter file_id receive the file number to download, return the file stream
D. When obtaining a list of files, the backend queries all attachments under the group number through the parameter Filegroupid in the URL, with the return JSON data:

{model_list:[{file_group_id: ' xx ', file_id: ' XXX1 ', file_name: ' xx file ', File_path: ' Test/test/xx file _20140810010101.html ', file_size:1001},{file_group_id: ' xx ', file_id: ' XXX2 ', file_name: ' xx file ', File_path: ' Test/test/xx file _ 20140810010102.html ', file_size:1001}]}

E. Get the file upload progress, the format returned is in JSON format:

{"percent": 10}

Note that in order to support multiple file upload read progress, each file upload has a unique uploadid, get the file upload progress needs to be based on this parameter, the parameter named upload_id when submitted

Download

The address of this fileupload front-end plugin has been placed on GitHub, with the path:

Https://github.com/kevin82008/fileupload

：

The level is limited, if not, welcome to shoot bricks.