HTML5中在客戶端驗證文件上傳的大小

在HTML 5中，現在可以在客戶端進行文件上傳時的校驗了，比如用戶選擇文件後，可以馬上校驗文件的大小和屬性等，這其實時得益於浏覽器端新增的對文件的校驗能力，其中支持HTML 5的浏覽器，都會實現W3C實現的文件API標准，其中可以讀取客戶端文件的各種信息和參數。

下面的例子如下，首先是HTML 界面端的

<input type="file" data-file_type="zip|png" data-max_size="1000000">

這裡data-file_type屬性中，指定了文件的類型，接受ZIP，PNG文件，用|分隔開來，其中data-max-size指定文件的大小，這裡是1MB。

然後使用jquery 進行判斷

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. //文件要求的指定大小
11. var max_size = parseInt($(this).attr('data-max_size'));
13. $(this).change(function(evt)
14. {
15. var finput = $(this);
17. var files = evt.target.files; // 獲得文件對象
19. var output = [];
21. for (var i = 0, f; f = files[i]; i++)
22. {
23. //檢查文件的類型是否符合指定要求
24. if(jQuery.inArray(f.type , mimes) == -1)
25. {
26. alert('File type '+ f.type + ' not allowed');
27. $(this).val('');
28. continue;
29. }
31. //檢查文件大小
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. });