Html5 implements the client to verify the size of the uploaded file (simple instance ),

Source: Internet
Author: User

Html5 implements the client to verify the size of the uploaded file (simple instance ),

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:

Copy XML/HTML Code to clipboard
  1. <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

Copy the content to the clipboard using JavaScript Code
  1. $ ('Input [type = file] '). each (function ()
  2. {
  3. If (typeof $ (this). attr ('data-file_type ') = 'string ')
  4. {
  5. Var file_types = $ (this). attr ('data-file_type '). split (' | ');
  6. }
  7. Var mimes = get_mimes (file_types );
  8. // Specify the file size
  9. Var max_size = parseInt ($ (this). attr ('data-max_size '));
  10. $ (This). change (function (evt)
  11. {
  12. Var finput = $ (this );
  13. Var files = evt.tar get. files; // get the file object
  14. Var output = [];
  15. For (var I = 0, f; f = files [I]; I ++)
  16. {
  17. // Check whether the file type meets the specified requirements
  18. If (jQuery. inArray (f. type, mimes) =-1)
  19. {
  20. Alert ('file type' + f. type + 'not allowed ');
  21. $ (This). val ('');
  22. Continue;
  23. }
  24. // Check the file size
  25. Else if (f. size> max_size)
  26. {
  27. Alert ('maximum file size is '+ max_size + 'bytes .');
  28. $ (This). val ('');
  29. }
  30. // Validation OK
  31. Else
  32. {
  33. Output. push ('[B]', f. name, '[/B] (', f. type | 'n'/A', ')-', f. size, 'bytes, last modified: ', f. lastModifiedDate. toLocaleDateString ());
  34. }
  35. }
  36. Finput. after ('<div>' + output. join ('') + '</div> ');
  37. });
  38. });

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

Copy the content to the clipboard using JavaScript Code
  1. /*
  2. Get the mimes of a list of extensions as an array
  3. */
  4. Function get_mimes (extensions)
  5. {
  6. Var mimes = [];
  7. For (var I in extensions)
  8. {
  9. Var ext = extensions [I];
  10. If (ext in mime_types)
  11. {
  12. Var mime = mime_types [ext];
  13. If ($. isArray (mime ))
  14. {
  15. JQuery. merge (mimes, mime );
  16. }
  17. Else
  18. {
  19. Mimes. push (mime );
  20. }
  21. }
  22. }
  23. Return mimes;
  24. }

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:

Copy the content to the clipboard using JavaScript Code
  1. Var mime_types = {
  2. "Gif": "image \/gif ",
  3. "Jpeg": ["image \/jpeg", "image \/pjpeg"],
  4. "Jpg": ["image \/jpeg", "image \/pjpeg"],
  5. "Jpe": ["image \/jpeg", "image \/pjpeg"],
  6. "Png": ["image \/png", "image \/x-png"],
  7. ..................
  8. }

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

Copy XML/HTML Code to clipboard
  1. Var files = evt.tar get. files; // obtain a file object. It is a collection and can contain multiple files.
  2. Var file_count = files. length; // file length
  3. Var file_1 = files [0]; // or files. item (0); obtain the first file in multiple files.
  4. Var name = file_1.name; // get the file name
  5. Var size = file_1.size; // get the file size
  6. Var type = file_1.type; // file type
  7. Var lastModifiedDate = file_1.lastModifiedDate; // file modification time

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

The above html5 implementation client verifies the size of the uploaded file (simple example) is all the content shared by Alibaba Cloud xiaobian. I hope you can give us a reference and support for the customer's house.

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

Related Article

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.