. NET + Ajax + jquery. form implements simple batch upload of images with demo source code download

The intern company has never done any web-related projects, but is afraid of missing web-related knowledge. If there is no time, it will flip through the previous projects, record some functions to facilitate future queries.

In some projects, you may need to upload images in batches. It is not enough to upload images in a light environment. You need to describe the images. net, if you use controls to implement this function, you will be miserable. Dynamic addition of controls, dynamic values are annoying, but fortunately I do not like it. net controls, or even annoying (the controls are not really bad here, just my habits)

This document describes how to use jquery and its form plug-in. Net to complete batch upload of images.

Everyone should know that it is simple to use jquery to dynamically add DOM elements. This function is mainly used to dynamically add forms through jquery to implement batch functions.

So, do we dynamically add input elements to form tags or directly add form tags to do this batch ??

First, let's take a look at the dynamic addition of input elements. Many online batch cases also use this method.

View code

 <  Form  >         <  Input  Type  = "File"  Name  = "Pic"   />      </  Form  >      <  Script  Type  = "Text/JavaScript"  >          VaR Html  =   "  <Input type = 'file' name = 'pic  "   +  $ (  "  Input [type = 'file']  "  ). Length +   "  '/>  "  ; $ (  "  Form  "  ). Append (HTML );  </  Script  > 

This is obvious, there will be no additional HTML, and the form is a one-time request to the server, and will be returned after all ends, but if there is a problem with an image during the upload process, subsequent images cannot be successfully pressed.ProgramUpload (of course, you can also remove the failed image through exception capture)

Next, let's look at the second example.Code

View code

 <  Fieldset  >      <  Form  >          <  Input  Type  = "File"  Name  = "Pic"  />      </  Form  >      </  Fieldset  >      <  Script  Type  = "Text/JavaScript"  >          VaR  Html  =  "  <Form>  "   +      "  <Input type = 'file' name = 'pic  "   +  $ (  "  Input [type = 'file'] "  ). Length  +   "  '/>  "   +      "  </Form>  "  ; $ (  " Fieldset  "  ). Append (HTML );  </  Script  > 

In this way, each image is a form, and when it is submitted, it requests the server to upload images one by form, which obviously leads to more requests, however, we can capture the number of current uploads and upload status on the client, and add additional information when uploading images.

In order to have a better experience, I chose the second one. Upload one by one and judge one by one

This article mainly uses recursive methods for requests. After all requests are completed, statistical prompts are sent to the requests.

Core request functions:

View code

 Function Tajaxfileupload (){  If (Num> = I) {$ ( "Form [name = 'uploadpic" + I + "']" ). Ajaxsubmit ({success:  Function  (HTML, status ){  If (Status = "success" ) {Html = Html. Replace (/<\/? [^>] *>/G ,'' );  // Html = html. Replace (/[|] * \ n/g, '\ n ');                                  VaR JSON = eval ('+ HTML + ')' );  If (JSON. State = "success "){ //  Uploaded Successnum ++ ; $ ( ". Picform"). eq (I-1). append ("<SPAN class = 'success '>" + JSON. MSG + "</span>" );}  Else { //  Upload Failed Failnum ++ ; $ ( ". Picform"). eq (I-1). append ("<SPAN class = 'error'>" + JSON. MSG + "</span>" );} I ++ ; SetTimeout (  Function () {Tajaxfileupload ()}, 500 ); //  Recursive Function delay: 500 seconds } Else  {Art. Dialog. Alert ( "Data request failed");}  //  Stauts success } //  Submit success }); //  Ajaxsubmit } Else  {  If (Confirm ('System processes '+ num +' users, \ r \ n, where '+ successnum +' photos are successfully uploaded, \ r \ n has '+ failnum +' Upload Failed, whether to continue to upload' ) {Location. Reload ();}}} //  T Ajax 

Let's see,

This is the initialized page. The following is an upload example.

 

The HTML code of the client and the uploaded code of the server will not be pasted out. If you are interested, you can

Click here to download the source code.