Html5 implementation client to verify the size of the uploaded file (simple instance) _ html5 tutorial tips-

The following small series will bring you an html5 implementation client to verify the size of the uploaded file (simple instance ). I think it is quite good. Now I will share it with you and give you a reference. Let's take a look at the small Editor. in HTML 5, you can check the file upload 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

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 ('

    '+ Output. join ('') +'

    ');
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 script.

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