Implementation of file upload techniques based on AJAX HTML _ajax related

Quotations: As you all know, uploading files in HTML is a input,type=file. However, the style of this label, it is not worth mentioning something, to change his style, I am afraid it is more difficult. But in fact quite simple, today to say upload file tips!

1. How to customize the style?
1, just according to their favorite style to see the definition can be, such as <a href= ' javascript:; ' class= ' Upload-button ' ></a>, can be the background picture effect, can be text instructions, anyhow want how to change how to change! With a button, you also need a filename container to store the name of the file you choose to upload, so that the upload does not seem bitter difficult to understand.

2, add real file control to upload, and set properties Display:none, such as <input type= ' file ' class= ' hide '/>, so that there is a real upload of the file place. So, it can be said that the upload file interface How beautiful depends on your imagination!

2. How to trigger an event?

This is a focus, the trigger point should be the style of their own writing, and the real element is hidden, but does not affect its Click effect, only need to give it a click event to trigger, such as $ (' #target-file '). Trigger (' click ');

3. Multiple selection of documents?

Multi-File upload, just use the HTML of a file Multiple=true, of course, you can also choose a third-party upload control, such as swfupload, the effect is really good, but for those who do not want to use plug-ins, it will not work.

4. Related plug-ins?

The interface beautification actually can use jQueryUI and so on plug-in;
To do some friendly interaction, will use AJAX technology, no refresh switch, asynchronous upload, submit, finally, in fact, the path of Ajax can also be retained, using Pushstate, Replacestate realize Pjax.
Form validation: Validform.js
Asynchronous submit file: Jquery.form.js
Friendly Bullet window tip: layer.js

5. A bit of compatibility problem?

Do interface work, the most fear is also very important work, is the compatibility between the various browsers, the following main columns for reference:

Table width is handled in an inconsistent manner;
Select, input display height inconsistency;

The Alert bomb window is inconsistent;

...

6. Demo Code

<a href= "javascript:;" up-type-id= "1" class= "btn btn-default small-btn switch-upload-method" ><span> local upload </span></a> <a href= "javascript:;" up-type-id= "2" class= "Upload-file-instead btn btn-default small-btn Switch-upload-method "><span> Packaging tools </span></a> <input type=" file "name=" apkfiles["" id= "
Local-upload-real-file "class=" upload-file-real Hide "response-id=" Local-upload-container "multiple= ' true '/> <input type= "File" name= "apktoolfiles[" "id=" Apk-tool-real-file "class=" upload-file-real Hide "response-id="
  Apk-tool-container-textarea "/> <script> $ (function () {var alerttitle = ' system hint: ';
  var submitid = ' #do-submit '; $ (' #taskForm '). ValidForm ({btnsubmit:submitid, tiptype:1, Ignorehidden:true, Dragonfly:false, tipsweep:true, label : ". Label", Showallerror:false, Postonce:true, Ajaxpost:true, datatype:{}, Beforecheck:function (Curf
 ORM) {}, Beforesubmit:function (Curform) {   $ ('. Upload-file-real '). attr (' disabled ', ' disabled '); $ (Submitid). attr (' disabled ', ' disabled ');
    Disable button Ajaxsubmitform (curform) before submitting;   $ (Submitid). Removeattr (' disabled ');
   Recovery can submit return false after failure;

  }, Submitform:function () {}//no longer functioning});
   Toggle Upload Method $ ('. Switch-upload-method '). Off (). On (' click ', function () {//$ (Submitid). attr (' disabled ', ' disabled ');
   var pobj = $ (this). Parent (). Find ('. Switch-upload-method ');
   var index = Pobj.index (this);      var Uploadtypeid = $ (' #upload-type-id '). Val ();
   Upload mode: 1: Packaging tools; 2: Local upload, 0: No upload method var Uploadtype = $ (this). attr (' Up-type-id '); if (parseint (' #sub-channel-count '). html () > 0) {if (Uploadtypeid!= uploadtype) {Layer.alert (') and child channel packet data, cannot complete the switch , please confirm the removal and then switch!
     ');
    return false;
   } pobj.not (': eq (' + index + ') '). Removeclass (' Btn-danger '). addclass (' Btn-default ');
   Pobj.eq (Index). Removeclass (' Btn-default '). addclass (' Btn-danger '); if (Uploadtype = =) {//local-upload $ (' #upload-type-id'). Val (Uploadtype);
    $ (' #init-apk-container '). Show ();
    $ (' #apk-tool-container '). Hide ();
    $ (' #upload-main-control '). Find ('. Del-it-main '). CSS ({display: ' Inline-block '});
   $ (' #local-upload-real-file '). Trigger (' click ');
    }else if (Uploadtype = =) {//apk-tool $ (' #upload-type-id '). Val (Uploadtype);
    $ (' #init-apk-container '). Hide ();
    $ (' #local-upload-container '). Hide ();
    $ (' #upload-main-control '). Find ('. Del-it-main '). Hide ();
   $ (' #apk-tool-container '). Show ();
  }
  });
   Local upload $ (' #local-upload-real-file '). Off (). On ("Change", function () {if (!$ (this). Val ()) {return false;
   } file_size = 0;
   FilePath = $ (this). Val ();
   MaxFileSize = 30 * 1024 * 1024;
   var browsercfg = {};
   var ua = window.navigator.userAgent;
   if (Ua.indexof ("MSIE") >=1) {browsercfg.ie = true;
   }else if (Ua.indexof ("Firefox") >=1) {Browsercfg.firefox = true;
   }else if (Ua.indexof ("Chrome") >=1) {browsercfg.chrome = true; } if (browsercfg.ie) {
    var img = new Image ();
    IMG.SRC = filepath;
    File_size = img.filesize; while (true) {if (Img.filesize > 0) {if (Img.filesize > MaxFileSize) {alert ("Upload package exceeds 30MB limit, please use the contractor With upload!
       ");
      return false;
     } break;
    }} else {file_size = this.files[0].size; if (File_size > MaxFileSize) {alert ("Upload package exceeds 30MB limit, please use the package tool to upload!")
     ");
    return false;
   } var Responseobjid = $ (this). attr (' Response-id ');
   var responseobj = $ (' # ' + Responseobjid); $ (' #taskForm '). Ajaxsubmit ({url: '/aa/bb/uploadtmpapk ', Resetform:false, DataType: ' JSON ', beforesubmit:f
    Unction (option) {window.loading = Layer.load (2);
     }, Success:function (data, statustext) {layer.close (window.loading);
      if (data.status = = 1) {$ (' #version-identifier '). Val (data.version);
      Responseobj.html (data.apkinfohtml);
      Responseobj.show ();
    var delobj = $ (' #upload-main-control '). Find ('. Del-it-main ');  Delobj.css ({' Display ': ' Inline-block '});
      $ (' #sub-channel-count '). HTML (data.apktotal);
      $ (' #init-apk-container '). Hide ();
     $ (Submitid). Removeattr (' disabled ');
     }else{Layer.alert (Data.info, {title:alerttitle});
     }, Error:function (data) {layer.close (window.loading); Layer.alert (' unknown error, please try again later!
    ');
   }
   });
  Return false;//prevent dialog from automatically closing});
   Packaging Tool $ (' #apk-tool-real-file '). Off (). On (' Change ', function () {if (!$ (). Val ()) {return false;
   var Responseobjid = $ (this). attr (' Response-id ');
   var responseobj = $ (' # ' + Responseobjid); $ (' #Form '). Ajaxsubmit ({url: '/aa/bb/uploadtmpapktool ', Resetform:false, DataType: ' JSON ', beforesubmit:f
    Unction (option) {window.loading = Layer.load (2);
     }, Success:function (data, statustext) {layer.close (window.loading);
      if (data.status = = 1) {$ (' #version-identifier '). Val (data.version);
      Responseobj.html (data.infohtml); var parentContainer = Responseobj.parent (). Parent (), Namecontainer = Parentcontainer.find ('. Apk-name-container '), Del
      OBJ = Parentcontainer.find ('. Del-it-apk-tool ');
      Namecontainer.html (Data.apkname);
      Namecontainer.attr (' title ', Data.apkname);
      $ (' #apk-tool-file-tmp '). HTML (data.fileinfo);
     $ (Submitid). Removeattr (' disabled ');
     }else{Layer.alert (Data.info, {title:alerttitle});
     }, Error:function (data) {layer.close (window.loading); Layer.alert (' unknown error, please try again later!
    ');
   }
   });
  Return false;//prevent dialog from automatically closing});
  $ ('. Apk-tool-upload-button '). On (' click ', Function () {$ (' #apk-tool-real-file '). Trigger (' click ');
 });
}); 
 </script>

Above, the main is, using the hidden input file tag selection, select the file immediately after the AJAX submission, and finally, the entire form of AJAX submission process.

Reasonable use of some CSS, JS, so that your Web page more free!

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.