jquery combined with HTML5 implementation file upload _jquery

1. Using jquery to use HTML5 's Formdata attribute to implement file upload

In HTML5 before we need to implement file upload server functions, sometimes we have to rely on flash to achieve, and in the arrival of HTML5, we are very easy to upload the file, only to take advantage of the HTML5 of a formdata attribute, Combined with jquery It is easy to upload the file, and read the file upload progress, the following upload case is based on the above mentioned implementation, I will all of the JS and CSS and HTML page code below.

Note: The Formdata attribute must be dependent on HTML5, so if you follow the functionality implemented by this code, the browser must be upgraded to the latest (Support HTML5 formdata attribute).

The 2.HTML page code is as follows

 <! DOCTYPE html>  

The 3.CSS code is as follows:

 /* Source header information:
 <copyright file= "fileupload.js" >
 Copyright (c) 2014-2034 kencery.all rights.
 Personal blog: Http://www.cnblogs.com/hanyinglong
 Creator: Han Guanlong (kencery)
 Date Created: 2015-6-24
 </copyright>*/
 
 Body
 {
   font-family: "Microsoft Ya Black";
   font-size:12px
 }
 . input-file {
   Overflow:hidden;
   Position:relative
 }
 . Input-file input {
   opacity:0;
   Filter:alpha (opacity=0);
   font-size:100px;
   Position:absolute;
   top:0;
   right:0;
 }
 #uploadTable {
   width:500px;
   Border-collapse:collapse;
   border:1px solid Silver;
 }

The 4.JS code is as follows:

SOURCE header information://<copyright file= "fileupload.js" >//Copyright (c) 2014-2034 kencery.all rights.
Created by: Han Guanlong (kencery)//Creation time: 2015-6-24//</copyright>; (function ($) {$.fn. Salesmoundupload = function (options) {var defaults = {saveurl: ', Jqinput: ', maxsize:1024
    * 1024 *,//100m fnremove: ',//Remove file, parameters: FileName fncomplete: '//per file success, parameter: Server-side return content};
    var opt = $.extend (defaults, options);
      Function Getbytetom (val) {if (isNaN (Val)) return to Val;
      val = val/(1024 * 1024);
      val = Math.Round (val * 100)/100;
    return Val;
      Return This.each (function () {var $this = $ (this);
      $this. empty (); if (typeof FormData = = ' undefine ') {alert (' browser version is too low to support upload!)
        ');
      Return
        //Table header if ($this. Find (' thead '). Length = = 0) {var $thead = $ (' <thead> ');
        var $th _tr = $ (' <tr> ');
     $th _tr.append (' <th> filename </th> ');   $th _tr.append (' <th> type </th> ');
        $th _tr.append (' <th> size </th> ');
        $th _tr.append (' <th> status </th> ');
        $th _tr.append (' <th> operation </th> ');
        $th _tr.appendto ($thead);
      $this. Append ($thead);
        } opt.jqinput[0].addeventlistener (' Change ', function (e) {var file = This.files[0];
        if (!file) {return;
          } if (File.size > Opt.maxsize) {window.alert (' file exceeds maximum ');
        Return
        var fd = new FormData ();
        var $table = $this;
        Fd.append ("UploadFile", file);
        var xhr = new XMLHttpRequest ();
        Xhr.open (' POST ', Opt.saveurl, true);
        Xhr.upload.addEventListener ("Progress", uploadprogress, false);
        Xhr.addeventlistener ("Load", Uploadcomplete, false);
        Xhr.addeventlistener ("Error", uploadfailed, false);
        Xhr.addeventlistener ("Abort", uploadcanceled, false); Table contents var $tr = $ (' <tr>');
        $tr. Append (' <td class= ' upload_name ' > ' + file.name + ' </td> ');
        $tr. Append (' <td class= ' upload_type ' > ' + file.type + ' </td> ');
        $tr. Append (' <td class= ' upload_size ' > ' + getbytetom (file.size) + ' M ' + ' </td> ');
        $tr. Append (' <td class= ' upload_status ' > ' + 0 + ' </td> '); $tr. Append (' <td class= "upload_action" ><a href= "javascript:void (0);"
        > ' + ' Cancel ' + ' </a></td> ');
        $tr. Find ('. Upload_action a '). Unbind (' click '). Bind (' click ', Function () {xhr.abort ();
        });
        $table. Append ($TR); function Uploadprogress (evt) {if (evt.lengthcomputable) {var percentcomplete = Math.Round (evt.load
            Ed * 100/evt.total);
          $tr. Find ('. Upload_status '). HTML (Math.Round (percentcomplete) + '% ');
          else {$tr. Find ('. Upload_status '). HTML (' Unable to compute ');
        }} function Uploadcomplete (evt) {  if (Evt.target.status =) {$tr. Find ('. Upload_status '). html (' completed ');
            $tr. Find ('. Upload_action a '). html (' delete ');
            if (typeof opt.fncomplete = = ' function ') {opt.fncomplete (evt.target.response);
          $tr. Find ('. Upload_action '). Unbind (' click '). Bind (' click ', RemoveFile); The function uploadfailed () {$tr. Find ('. Upload_status '). html (' <a href= ' javascript:void (0); "
          >x</a> ');
          $tr. Find ('. Upload_status a '). Unbind (' click '). Bind (' click ', Function () {$tr. Remove ();
          });
          $tr. Find ('. Upload_action a '). html (' Retry ');
          $tr. Find ('. Upload_action a '). Unbind (' click '). Bind (' click ', Function () {xhr.send (FD);
        });
        function uploadcanceled () {$tr. Remove ();
          function RemoveFile () {$tr. Remove (); if (typeof opt.fnremove = = ' function ') {Opt.fnremove (fiLe.name);
      } xhr.send (FD);
    }, False);
  });
};

 } (JQuery));

5. Code View address: https://github.com/kencery/Common/tree/master/KenceryCommonMethod/%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0

The above mentioned is the entire content of this article, I hope you can enjoy.