客戶端js判斷文件類型和文件大小即限制上傳大小
更新時(shí)間：2013年11月20日 15:42:56 作者：
需要腳本在客戶端判斷大小和文件類型，由于網(wǎng)上沒(méi)有適合的，就自己寫(xiě)了一個(gè)并測(cè)試 文件上傳大小限制的一個(gè)例子，在此與大家分享下
由于項(xiàng)目需要！需要腳本在客戶端判斷大小和文件類型！自己網(wǎng)上找資料找的好辛苦！索性自己寫(xiě)了一個(gè)并測(cè)試 文件上傳大小限制的一個(gè)例子，兼容ie6，ie7，ie8 ，Google Chrome，ff等瀏覽器
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
function fileChange(target,id) {
var fileSize = 0;
var filetypes =[".jpg",".png",".rar",".txt",".zip",".doc",".ppt",".xls",".pdf",".docx",".xlsx"];
var filepath = target.value;
var filemaxsize = 1024*2;//2M
if(filepath){
var isnext = false;
var fileend = filepath.substring(filepath.indexOf("."));
if(filetypes && filetypes.length>0){
for(var i =0; i<filetypes.length;i++){
if(filetypes[i]==fileend){
isnext = true;
break;
}
}
}
if(!isnext){
alert("不接受此文件類型！");
target.value ="";
return false;
}
}else{
return false;
}
if (isIE && !target.files) {
var filePath = target.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
if(!fileSystem.FileExists(filePath)){
alert("附件不存在，請(qǐng)重新輸入！");
return false;
}
var file = fileSystem.GetFile (filePath);
fileSize = file.Size;
} else {
fileSize = target.files[0].size;
}
var size = fileSize / 1024;
if(size>filemaxsize){
alert("附件大小不能大于"+filemaxsize/1024+"M！");
target.value ="";
return false;
}
if(size<=0){
alert("附件大小不能為0M！");
target.value ="";
return false;
}
}
</script>
</head>
<body>
<input type="file" name="contractFileName" style="width: 500px;" onchange="fileChange(this);"/>
</body>
</html>
復(fù)制代碼 代碼如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
function fileChange(target,id) {
var fileSize = 0;
var filetypes =[".jpg",".png",".rar",".txt",".zip",".doc",".ppt",".xls",".pdf",".docx",".xlsx"];
var filepath = target.value;
var filemaxsize = 1024*2;//2M
if(filepath){
var isnext = false;
var fileend = filepath.substring(filepath.indexOf("."));
if(filetypes && filetypes.length>0){
for(var i =0; i<filetypes.length;i++){
if(filetypes[i]==fileend){
isnext = true;
break;
}
}
}
if(!isnext){
alert("不接受此文件類型！");
target.value ="";
return false;
}
}else{
return false;
}
if (isIE && !target.files) {
var filePath = target.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
if(!fileSystem.FileExists(filePath)){
alert("附件不存在，請(qǐng)重新輸入！");
return false;
}
var file = fileSystem.GetFile (filePath);
fileSize = file.Size;
} else {
fileSize = target.files[0].size;
}
var size = fileSize / 1024;
if(size>filemaxsize){
alert("附件大小不能大于"+filemaxsize/1024+"M！");
target.value ="";
return false;
}
if(size<=0){
alert("附件大小不能為0M！");
target.value ="";
return false;
}
}
</script>
</head>
<body>
<input type="file" name="contractFileName" style="width: 500px;" onchange="fileChange(this);"/>
</body>
</html>
相關(guān)文章
JS中將blob返回值轉(zhuǎn)換為json格式的問(wèn)題小結(jié)
這篇文章主要介紹了JS中如何將blob返回值轉(zhuǎn)換為json格式,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
用js實(shí)現(xiàn)隨機(jī)返回?cái)?shù)組的一個(gè)元素
js實(shí)現(xiàn)隨機(jī)返回?cái)?shù)組的一個(gè)元素，這是個(gè)奇妙的方法。適合做標(biāo)題性質(zhì)文字的隨機(jī)輪換顯示2007-08-08
這篇文章主要為大家介紹了微信APP生命周期及頁(yè)面生命周期當(dāng)然示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-04-04
webpack打包后直接訪問(wèn)頁(yè)面圖片路徑錯(cuò)誤的解決方法
這篇文章主要給大家介紹了在webpack打包后直接訪問(wèn)頁(yè)面圖片路徑錯(cuò)誤的解決方法，文中介紹的非常詳細(xì)，對(duì)遇到這個(gè)問(wèn)題的朋友們具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-06-06
微信小程序?qū)崿F(xiàn)可以截?cái)嗟钠俨剂鹘M件的示例代碼
本文主要介紹了微信小程序?qū)崿F(xiàn)可以截?cái)嗟钠俨剂鹘M件2022-01-01
深入理解JavaScript 中的執(zhí)行上下文和執(zhí)行棧
這篇文章主要介紹了JavaScript 中的執(zhí)行上下文和執(zhí)行棧的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10
echarts實(shí)現(xiàn)地圖定時(shí)切換散點(diǎn)與多圖表級(jí)聯(lián)聯(lián)動(dòng)詳解
這篇文章主要給大家介紹了關(guān)于echarts實(shí)現(xiàn)地圖定時(shí)切換散點(diǎn)與多圖表級(jí)聯(lián)聯(lián)動(dòng)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08
ES6標(biāo)準(zhǔn)新增了一種新的函數(shù)：Arrow Function（箭頭函數(shù)）。那么下面這篇文章主要給大家介紹了箭頭函數(shù)中this的相關(guān)資料，有需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-02-02
原生JS實(shí)現(xiàn)簡(jiǎn)單放大鏡效果
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)簡(jiǎn)單放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
JavaScript分步實(shí)現(xiàn)一個(gè)出生日期的正則表達(dá)式
本文把出生日期分割成幾個(gè)部分，分步地介紹了實(shí)現(xiàn)一個(gè)出生日期校驗(yàn)的完整過(guò)程。對(duì)出生日期正則表達(dá)式感興趣的朋友參考下吧2018-03-03