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

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. }
8. Var mimes = get_mimes (file_types );
10. // Specify the file size
11. Var max_size = parseInt ($ (this). attr ('data-max_size '));
13. $ (This). change (function (evt)
14. {
15. Var finput = $ (this );
17. Var files = evt.tar get. files; // get the file object
19. Var output = [];
21. For (var I = 0, f; f = files [I]; I ++)
22. {
23. // Check whether the file type meets the specified requirements
24. If (jQuery. inArray (f. type, mimes) =-1)
25. {
26. Alert ('file type' + f. type + 'not allowed ');
27. $ (This). val ('');
28. Continue;
29. }
31. // Check the file size
32. Else if (f. size> max_size)
33. {
34. Alert ('maximum file size is '+ max_size + 'bytes .');
35. $ (This). val ('');
36. }
38. // Validation OK
39. Else
40. {
41. Output. push ('[B]', f. name, '[/B] (', f. type | 'n'/A', ')-', f. size, 'bytes, last modified: ', f. lastModifiedDate. toLocaleDateString ());
42. }
43. }
45. Finput. after ('<div>' + output. join ('') + '</div> ');
46. });
47. });

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];
11. If (ext in mime_types)
12. {
13. Var mime = mime_types [ext];
15. If ($. isArray (mime ))
16. {
17. JQuery. merge (mimes, mime );
18. }
19. Else
20. {
21. Mimes. push (mime );
22. }
23. }
24. }
26. Return mimes;
27. }

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
4. Var file_1 = files [0]; // or files. item (0); obtain the first file in multiple files.
6. Var name = file_1.name; // get the file name
7. Var size = file_1.size; // get the file size
8. Var type = file_1.type; // file type
9. 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