How does html5 implement the client to verify the size of the uploaded file-small_123

How does html5 implement the client to verify the size of the uploaded file-small_123 in HTML 5, you can now verify the size of the uploaded file on the client, for example, after you select a file, the file size and attributes can be verified immediately. This article describes how html5 implements client-side verification of the size of uploaded files. For more information, see.

In HTML 5, you can verify the file upload on the client. for example, after you select a file, you can check the file size and attributes immediately, this is in real time thanks to the new file verification capability on the browser side, which supports HTML 5 browsers, all implement the File API standards implemented by W3C, various information and parameters of the client files can be read.

The example below is as follows:

Here, the data-file_type property specifies the file type, accepts ZIP, PNG files, separated by |, where data-max-size specifies the file size, which is 1 MB. Then use jquery to determine

$ ('Input [type = file] '). each (function () {if (typeof $ (this ). attr ('data-file_type ') = 'string') {var file_types = $ (this ). attr ('data-file_type '). split ('|');} var mimes = get_mimes (file_types); // specify the file size var max_size = parseInt ($ (this ). attr ('data-max_size '); $ (this ). change (function (evt) {var finput = $ (this); var files = evt.tar get. files; // Obtain the file object var output = []; for (var I = 0, f; f = files [I]; I ++) {// check whether the object type meets the specified requirements. if (jQuery. inArray (f. type, mimes) =-1) {alert ('file type' + f. type + 'not allowed'); $ (this ). val (''); continue;} // check the file size else if (f. size> max_size) {alert ('maximum file size is '+ max_size + 'bytes. '); $ (this ). val ('');} // Validation OK else {output. push ('[B]', f. name, '[/B] (', f. type | 'n'/A', ')-', f. size, 'bytes, last modified: ', f. lastModifiedDate. toLocaleDateString () ;}} finput. after ('
'+ Output. join ('') +'
');});});

In the above code, var mimes = get_mimes (file_types); is actually a method, as follows:

/*     Get the mimes of a list of extensions as an array */  function get_mimes(extensions)  {      var mimes = [];      for(var i in extensions)      {          var ext = extensions[i];            if(ext in mime_types)          {              var mime = mime_types[ext];                if($.isArray(mime))              {                  jQuery.merge(mimes , mime);              }              else              {                  mimes.push(mime);              }          }      }        return mimes;  }  

Here, we will pass in the ZIP and PNG types, and then return the MIME/TYPE corresponding to these types of files, for example, defining a mime_types array, as shown below:

var mime_types = {  "gif":"image\/gif", "jpeg":["image\/jpeg","image\/pjpeg"], "jpg":["image\/jpeg","image\/pjpeg"], "jpe":["image\/jpeg","image\/pjpeg"], "png":["image\/png","image\/x-png"], .................. } 

In HTML 5, the new file API can determine the file type immediately on the client, as shown below:

Var files = evt.tar get. files; // get the file object, which is a collection and can have multiple files var file_count = files. length; // file length var file_1 = files [0]; // or files. item (0); obtain the first file in multiple files var name = file_1.name; // Obtain the file name var size = file_1.size; // Obtain the file size var type = file_1.type; // file type var lastModifiedDate = file_1.lastModifiedDate; // file modification time

For details about HTML 5 file upload, see: http://www.w3.org/TR/file-upload/

Address: http://www.manongjc.com/article/814.html

Related reading:

Resumable HTML5 File API File Upload

Html5 solution for resumable Upload/upload of large files

Php uses html5 to upload large files

Html5 multipart/multipart Upload of ultra-large files