Jquery combined with HTML5 to achieve file upload

  • 2020-06-19 09:50:06
  • OfStack

1. Use Jquery to upload files using the FormData attribute of HTML5

Before HTML5 if we need to realize the function such as file upload server, sometimes we have to rely on FLASH to implementation, and after the arrival of a HTML5, it is easy to realize the file upload, only need to use HTML5 1 FormData properties, combined with Jquery can easily realize the file upload, and read the file upload progress, upload the following case is implemented based on the above, below I will all JS and CSS and HTML code on the following page.

Note: the FormData property must depend on HTML5, so if you follow the code in this article, your browser must be updated to the latest (HTML5 FormData property is supported).

2.HTML page code is as follows


 <!DOCTYPE html>
 
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <meta charset="utf-8" />
     <title> use HTML the FormData Properties to achieve file upload </title>
     <link rel="stylesheet" href="../css/fileUpload.css" />
   </head>
   <body>
     <table id="uploadTable" style="border: 1px;"></table>
     <br/>
     <a href="javascript:void(0);" class="input-file">
        Add files <input type="file" id="txtFile" style="width:200px;" />
     </a>
     <script type="text/javascript" src="../js/jquery-1.7.1-min.js"></script>
 
     <script type="text/javascript">
       $(function () {
         $('#uploadTable').SalesMOUNDUpload({
           saveUrl: '/Test/Save',
           jqInput: $('#txtFile'),
           fnRemove: removeFile,
           fnComplete: function (d) {
             window.console.log('complete ' + d);
           }
         });
       });
       function removeFile(d) {
         $.post('/Test/Remove', { "filename": d }, function(r) {
           
         });
       }
     </script>
   </body>
 </html>

3.CSS code is as follows:


 /* Source header information: 
 <copyright file="FileUpload.js">
 Copyright(c)2014-2034 Kencery.All rights reserved.
  Personal blog: http://www.cnblogs.com/hanyinglong
  Founder: Han Yinglong (kencery)
  Creation time: 2015-6-24
 </copyright>*/
 
 body
 {
   font-family: " Microsoft jas 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;
 }

4.JS code is as follows:


//  Source header information: 
// <copyright file="FileUpload.js">
// Copyright(c)2014-2034 Kencery.All rights reserved.
//  Founder: Han Yinglong (kencery)
//  Creation time: 2015-6-24
// </copyright>
;
(function($) {
  $.fn.SalesMOUNDUpload = function(options) {
    var defaults =
    {
      saveUrl: '',
      jqInput: '',
      maxSize: 1024 * 1024 * 100, //100M
      fnRemove: '', // Remove the file   , parameter: filename 
      fnComplete: '' // Each file succeeds   , parameter: contents returned by the server side 
    };
    var opt = $.extend(defaults, options);
    function getByteToM(val) {
      if (isNaN(val)) return 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(' The browser version is too low to support uploading! ');
        return;
      }
      // header 
      if ($this.find('thead').length == 0) {
        var $thead = $('<thead>');
        var $th_tr = $('<tr>');
        $th_tr.append('<th> The file name </th>');
        $th_tr.append('<th> type </th>');
        $th_tr.append('<th> The size of the </th>');
        $th_tr.append('<th> state </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 exceeding 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 of 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.loaded * 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 == 200) {
            $tr.find('.upload_status').html(' Has been 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);
          }
        }
        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. The code to check the address: https: / / github com/kencery/Common/tree/E6 master KenceryCommonMethod / % % 96% 87% E4 B6 BB E4 % % % % B8 8 BC E4 A % % % % A0

This is the end of this article, I hope you enjoy it.


Related articles: