JS前端判断上传文件大小及格式实现方案

前端文件上传校验思路

在进行文件上传功能开发时，若需实现异步上传效果，通常采用iframe方式。由于iframe无法像AJAX那样直接处理服务端返回的数据以进行后续判断，因此常需借助JavaScript对上传文件的大小及格式进行初步校验，随后在服务端再次验证，以防浏览器禁用脚本导致的安全漏洞。以下提供一种使用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）

最新发现的一段代码实现效果较好。

介绍在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('文件格式错误请重新上传！');
                    return;
                }
                blobToDataURL(img);
            }
           // Xrm.Utility.showProgressIndicator("处理中")
        }
 
//上传多格式判断
      function pdtype(ext) {
            return ['png', 'pdf', 'jpg', 'doc', 'docx', 'xls', 'xlsx'].indexOf(ext.toLowerCase());
        }

至此，关于JS判断上传文件大小及格式的代码介绍完毕。如需了解更多相关内容，可搜索本站历史文章或浏览其他相关文章，感谢支持。