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

在HTML 5中，現(xiàn)在可以在客戶端進(jìn)行文件上傳時的校驗(yàn)了，比如用戶選擇文件后，可以馬上校驗(yàn)文件的大小和屬性等，這其實(shí)時得益于瀏覽器端新增的對文件的校驗(yàn)?zāi)芰?#xff0c;其中支持HTML 5的瀏覽器，都會實(shí)現(xiàn)W3C實(shí)現(xiàn)的文件API標(biāo)準(zhǔn)，其中可以讀取客戶端文件的各種信息和參數(shù)。

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

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

JavaScript Code復(fù)制內(nèi)容到剪貼板

$('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);?其實(shí)是一個方法，如下：

JavaScript Code復(fù)制內(nèi)容到剪貼板

/*

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;

}

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

JavaScript Code復(fù)制內(nèi)容到剪貼板

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"],

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

}

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

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;??//文件修改時間

詳細(xì)的關(guān)于HTML 5文件上傳的，見：?http://www.w3.org/TR/file-upload/

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。