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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.