客戶端js判斷文件類型和文件大小即限制上傳大小
更新時(shí)間：2013年11月20日 15:42:56 作者：
需要腳本在客戶端判斷大小和文件類型，由于網(wǎng)上沒有適合的，就自己寫了一個(gè)并測試 文件上傳大小限制的一個(gè)例子，在此與大家分享下
由于項(xiàng)目需要！需要腳本在客戶端判斷大小和文件類型！自己網(wǎng)上找資料找的好辛苦！索性自己寫了一個(gè)并測試 文件上傳大小限制的一個(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("附件不存在，請重新輸入！");
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("附件不存在，請重新輸入！");
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實(shí)現(xiàn)表單全選以及取消全選實(shí)例
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)表單全選以及取消全選實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
uview-plus是uni-app全面兼容nvue的uni-app生態(tài)框架,全面的組件和便捷的工具會(huì)讓您信手拈來,下面這篇文章主要給大家介紹了關(guān)于uniapp使用第三方UI庫uview-plus的方法,需要的朋友可以參考下2023-04-04
JS實(shí)現(xiàn)數(shù)組去重及數(shù)組內(nèi)對(duì)象去重功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)數(shù)組去重及數(shù)組內(nèi)對(duì)象去重功能,結(jié)合實(shí)例形式分析了ES5與ES6兩種版本針對(duì)數(shù)組去重的相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
JS 實(shí)現(xiàn)10進(jìn)制轉(zhuǎn)換36進(jìn)制的示例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)10進(jìn)制轉(zhuǎn)換36進(jìn)制，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
extjs中form與grid交互數(shù)據(jù)(record)的方法
這篇文章介紹了extjs中form與grid交互數(shù)據(jù)(record)的方法，有需要的朋友可以參考一下2013-08-08
最近公司項(xiàng)目用到了avtivex控件。以前從來沒有用過。我把最近到處找到的使用方法整理一下。2011-01-01
這篇文章主要來和大家一起探討一下20?種?JavaScript?技巧和竅門,每種技巧和竅門都有通俗易懂的示例,讓我們一起來提升你的?JavaScript?技能吧2023-10-10
原生js仿jq判斷當(dāng)前瀏覽器是否為ie,精確到ie6~8
這篇文章主要介紹了原生js仿jq判斷當(dāng)前瀏覽器是否為ie,精確到ie6~8,需要的朋友可以參考下2014-08-08
uni-app使用swiper實(shí)現(xiàn)輪播圖的方法
做音樂播放器小程序時(shí),因?yàn)閟wiper的問題耽誤不少時(shí)間,所以下面這篇文章主要給大家介紹了關(guān)于uni-app使用swiper實(shí)現(xiàn)輪播圖的相關(guān)資料,需要的朋友可以參考下2022-11-11
javascript中字體浮動(dòng)效果的簡單實(shí)例演示
這篇文章主要介紹了javascript中字體浮動(dòng)效果的簡單實(shí)例演示,在一些網(wǎng)站上經(jīng)常遇到當(dāng)鼠標(biāo)移導(dǎo)航欄的時(shí)候，能夠使其彈出下拉選項(xiàng)，現(xiàn)在就演示一下這種功能，感興趣的小伙伴們可以參考一下2015-11-11