快捷導(dǎo)航

js 判斷上傳文件大小及格式代碼

更新時(shí)間：2024年01月26日 00:08:57 投稿：whsnow

用js對(duì)上傳的文件大小以及格式進(jìn)行初步的判斷，在服務(wù)端再進(jìn)行一次判斷（防止瀏覽器拒絕執(zhí)行腳本文件)下面有個(gè)不錯(cuò)的方法大家可以參考下

我們?cè)谧鑫募蟼鲿r(shí)，為了實(shí)現(xiàn)異步上傳的效果，一般會(huì)選擇采用iframe的形式來進(jìn)行文件的上傳，但我們不能像ajax那樣對(duì)服務(wù)端返回的數(shù)據(jù)進(jìn)行處理，從而來進(jìn)行文件大小以及文件樣式的判斷，所以我們一般也會(huì)想到使用js對(duì)上傳的文件大小以及格式進(jìn)行初步的判斷，在服務(wù)端再進(jìn)行一次判斷（防止瀏覽器拒絕執(zhí)行腳本文件）。
以下提供一種方法用js判斷文件大小。

var url = window.location.href, type = url.substr(url.lastIndexOf('/')+1);
// console.log(type);
var allowType = {
".bmp":1, ".png":1, ".jpeg":1, ".jpg":1, ".gif":1,
".mp3":2, ".wma":2, ".wav":2, ".amr":2,
".rm":3, ".rmvb":3, ".wmv":3, ".avi":3, ".mpg":3, ".mpeg":3, ".mp4":3
};
var allowSize = {1:2097152, 2:5242880, 3:20971520};
var errMsg = {
"0" : '圖片格式不正確<br/>'
+ '音頻格式不正確<br/>'
+ '視頻格式不正確<br/>',
"1" : ‘圖片格式不正確',
"2" : '音頻格式不正確',
"3" : '視頻格式不正確'
};
var errSizeMsg = {
'1':'圖片文件小于2M',
'2':'音頻文件小于5M',
'3':'視頻文件小于20M',
}
function checkFileType(filename, type){
var ext = filename.substr(filename.lastIndexOf(".")).toLowerCase(),
res = allowType[ext];
if (type == 0) {
return !!res;
} else {
return type == res;
}
}
function checkFileSize(target, size){
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
var fileSize = 0;
if (isIE && !target.files)
{
var filePath = target.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
var file = fileSystem.GetFile (filePath);
fileSize = file.Size;
} else {
fileSize = target.files[0].size;
}
// var fsize = fileSize / 1024*1024;
if(parseInt(fsize) >= parseInt(size)){
return false;
}else{
return true;
}
}
function upload(obj){
var filename = jQuery.trim(jQuery('#uploadFile').val());
if (!filename || filename == ""){ // 提交前的再次檢測
alert('選擇需要上傳的文件');
return false;
}
if (!checkFileType(filename, type)){
alert('文件格式不正確');
return false;
}
var ext = filename.substr(filename.lastIndexOf(".")).toLowerCase();
var res = allowType[ext];
if(!checkFileSize(obj,allowSize[res])){
alert(errSizeMsg[res]);
return false;
}
//其他處理
}
//uploadFile為上傳控件的id，obj為上傳控件的本身（this）

最新發(fā)現(xiàn)的一段代碼也比較不錯(cuò)

js 上傳之后去除onclick 事件判斷上傳格式

移除 onclick事件
 
$("#enclosure").removeAttr("onclick"); 
 
 
  function changeImg() {
            debugger;
            var file = document.getElementById("file");
            var img = file.files[0];
            file.value = '';
            if (img) {
                // var base64 = blobToDataURL(img, function(base64Url) {
                // 	enclosure.text = base64Url;
                // })
                var type = img.name.substr((img.name.lastIndexOf(".") + 1));//文件后綴
                console.log(pdtype(type));
                if (pdtype(type) == -1) {
                    alert('文件格式錯(cuò)誤請(qǐng)重新上傳！');
                    return;
                }
                blobToDataURL(img);
            }
           // Xrm.Utility.showProgressIndicator("處理中")
        }
 
//上傳多格式判斷
      function pdtype(ext) {
            return ['png', 'pdf', 'jpg', 'doc', 'docx', 'xls', 'xlsx'].indexOf(ext.toLowerCase());
        }

到此這篇關(guān)于js 判斷上傳文件大小及格式代碼的文章就介紹到這了,更多相關(guān)判斷上傳文件大小內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: