歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

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.     }   
  7.          
  8.     var mimes = get_mimes(file_types);   
  9.   
  10.          //文件要求的指定大小   
  11.     var max_size = parseInt($(this).attr('data-max_size'));   
  12.   
  13.     $(this).change(function(evt)   
  14.     {   
  15.         var finput = $(this);   
  16.   
  17.         var files = evt.target.files; // 獲得文件對象   
  18.   
  19.                 var output = [];   
  20.   
  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.             }   
  30.   
  31.             //檢查文件大小   
  32.             else if(f.size > max_size)   
  33.             {   
  34.                 alert('Maximum file size is ' + max_size + ' bytes.');   
  35.                 $(this).val('');   
  36.             }   
  37.   
  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.         }   
  44.   
  45.         finput.after('<div>' + output.join('') + '</div>');   
  46.     });   
  47. });  
Copyright © Linux教程網 All Rights Reserved