HTML5 how to implement client-side verification of upload file size, _php tutorial

HTML5 how to implement client-side verification of upload file size,

In HTML 5, you can now check the client for file uploads, such as when the user selects a file, you can check the file size and properties immediately. This article to the code Farm introduction HTML5 How to achieve the client to verify the size of the upload file, interested in the code farmers can refer to.

In HTML 5, can now be in the client file upload verification, such as the user to select the file, you can immediately verify the size and properties of the file, which in fact, thanks to the browser side of the new file verification capabilities, which support the HTML 5 browser, will achieve the Web implementation of the file API standards, It can read various information and parameters of the client file.

The following example is the first HTML

Here the Data-file_type attribute, specifying the type of file, accept the Zip,png file, separated by |, where data-max-size specifies the size of the file, here is 1MB. Then use jquery to judge

$ (' input[type=file] '). each (function () {if (typeof $ (this). attr (' data-file_type ') = = ' string ') {var fi      Le_types = $ (this). attr (' Data-file_type '). Split (' | ');             } var mimes = Get_mimes (file_types);        The file requires a specified size of var max_size = parseint ($ (this). attr (' data-max_size '));            $ (this). Change (the function (evt) {var finput = $ (this); var files = evt.target.files;            Get the file object var output = []; for (var i = 0, f; f = files[i]; i++) {//Check whether the file type meets the specified requirements if (Jquery.inarray (F.type, MI                  MES) = =-1) {alert (' File type ' + F.type + ' not allowed ');                  $ (this). Val (');              Continue }//Check file size else if (F.size > Max_size) {alert (' Maximum file s                  Ize 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;  }  

This is actually the type of zip,png that is passed in, and then returns a corresponding mime/type for such a file, such as defining an Mime_types array, as follows:

var mime_types = {  

The focus is on HTML 5, the new file API, which can be immediately judged on the client file type, as follows:

var files = evt.target.files; Gets the file object, which is a collection that can have multiple files var file_count = files.length;  File length var file_1 = files[0]; or Files.item (0); Here you get the first file in multiple files var name = File_1.name; Get the file name var size = file_1.size;//Get the size var type = File_1.type; File type var lastmodifieddate = file_1.lastmodifieddate;  

For more information on HTML 5 file uploads, see: http://www.w3.org/TR/file-upload/

Original address: http://www.manongjc.com/article/814.html

Related reading:

resumable file upload for HTML5 files API

HTML5 to resolve large file breakpoint Continuation/upload method

PHP combined with HTML5 implementation of large file upload method

HTML5 shard/chunked/split upload oversized files

http://www.bkjia.com/PHPjc/1126420.html www.bkjia.com true http://www.bkjia.com/PHPjc/1126420.html techarticle HTML5 How to implement the client to verify the size of the upload file, in HTML 5, can now be in the client file upload verification, such as the user select the file, can be verified immediately ...

