在HTML 5中，現在可以在客戶端進行文件上傳時的校驗了，比如用戶選擇文件后，可以 馬上校驗文件的大小和屬性等。本文章向碼農介紹html5 如何實現客戶端驗證上傳文件的大小，感興趣的碼農可以參考一下。

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

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

XML/HTML Code復制內容到剪貼板

這里data-file_type屬性中，指定了文件的類型，接受ZIP，PNG文件，用|分隔開來，其中data-max-size指定文件的大小，這里是1MB。然后使用jquery 進行判斷

JavaScript Code復制內容到剪貼板

$('input[type=file]').each(function()

{

if(typeof$(this).attr('data-file_type')?=='string')

{

varfile_types?=?$(this).attr('data-file_type').split('|');

}

varmimes?=?get_mimes(file_types);

//文件要求的指定大小

varmax_size?=?parseInt($(this).attr('data-max_size'));

$(this).change(function(evt)

{

varfinput?=?$(this);

varfiles?=?evt.target.files;//?獲得文件對象

varoutput?=?[];

for(vari?=?0,?f;?f?=?files[i];?i++)

{

//檢查文件的類型是否符合指定要求

if(jQuery.inArray(f.type?,?mimes)?==?-1)

{

alert('File?type?'+?f.type?+'?not?allowed');

$(this).val('');

continue;

}

//檢查文件大小

elseif(f.size?>?max_size)

{

alert('Maximum?file?size?is?'+?max_size?+'?bytes.');

$(this).val('');

}

//Validation?ok

else

{

output.push('[b]',?f.name,'[/b]?(',?f.type?||'n/a',')?-?',?f.size,'?bytes,?last?modified:?',?f.lastModifiedDate.toLocaleDateString()?);

}

}

finput.after('

'+?output.join('')?+'');

});

});

在上面的代碼中， var mimes = get_mimes(file_types);?其實是一個方法，如下：

JavaScript Code復制內容到剪貼板

/*

Get?the?mimes?of?a?list?of?extensions?as?an?array

*/

functionget_mimes(extensions)

{

varmimes?=?[];

for(variinextensions)

{

varext?=?extensions[i];

if(extinmime_types)

{

varmime?=?mime_types[ext];

if($.isArray(mime))

{

jQuery.merge(mimes?,?mime);

}

else

{

mimes.push(mime);

}

}

}

returnmimes;

}

這里其實就是將ZIP，PNG這樣的類型傳入，然后返回一個這類文件對應的MIME/TYPE，比如定義一個?mime_types數組，如下：

JavaScript Code復制內容到剪貼板

varmime_types?=?{

"gif":"image\/gif",

"jpeg":["image\/jpeg","image\/pjpeg"],

"jpg":["image\/jpeg","image\/pjpeg"],

"jpe":["image\/jpeg","image\/pjpeg"],

"png":["image\/png","image\/x-png"],

..................

}

重點關注的是HTML 5中，新的文件API，可以在客戶端馬上判斷文件類型，如下：

XML/HTML Code復制內容到剪貼板

varfiles=evt.target.files;?//?獲得文件對象，是一個集合，可以有多個文件

varfile_count=files.length;??//文件長度

varfile_1=files[0];?//?or?files.item(0)；這里獲得多個文件中的第一個文件

varname=file_1.name;?//獲得文件名

varsize=file_1.size;//獲得文件大小

vartype=file_1.type;?//文件類型

varlastModifiedDate=file_1.lastModifiedDate;??//文件修改時間

詳細的關于HTML 5文件上傳的，見：?http://www.w3.org/TR/file-upload/

以上這篇html5 實現客戶端驗證上傳文件的大小(簡單實例)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持找一找教程網。

總結

以上是生活随笔為你收集整理的如何上传html验证文件大小,html5 实现客户端验证上传文件的大小(简单实例)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。