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

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

In HTML 5, you can check the file size and attributes when uploading files on the client. For example, after you select a file, you can check the file size and attributes 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:

<input type="file" data-file_type="zip|png" data-max_size="1000000"> 

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 ('<div>' + output. join ('') + '</div> ');});});

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