js 判断上传文件大小及格式代码

 更新时间:2024年01月26日 00:08:57   投稿:whsnow  
用js对上传的文件大小以及格式进行初步的判断,在服务端再进行一次判断(防止浏览器拒绝执行脚本文件)下面有个不错的方法大家可以参考下

我们在做文件上传时,为了实现异步上传的效果,一般会选择采用iframe的形式来进行文件的上传,但我们不能像ajax那样对服务端返回的数据进行处理,从而来进行文件大小以及文件样式的判断,所以我们一般也会想到使用js对上传的文件大小以及格式进行初步的判断,在服务端再进行一次判断(防止浏览器拒绝执行脚本文件)。
以下提供一种方法用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 判断上传文件大小及格式代码的文章就介绍到这了,更多相关判断上传文件大小内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 使用JavaScript关闭窗口的4种方法举例

    使用JavaScript关闭窗口的4种方法举例

    在Web开发中,有时候我们需要通过JavaScript来控制用户的浏览器行为,其中之一就是关闭浏览器窗口,下面这篇文章主要给大家介绍了关于使用JavaScript关闭窗口的4种方法,需要的朋友可以参考下
    2024-01-01
  • 让IE8支持DOM 2(不用框架!)

    让IE8支持DOM 2(不用框架!)

    众所周知,IE8开放了对DOM原型的支持以及ECMA v5的两个新方法——Object.defineProperty和Object.getOwnPropertyDexcriptor(单词好长……),并且这两个新方法居然只能用于DOM。
    2009-12-12
  • 使用javascript实现判断当前浏览器

    使用javascript实现判断当前浏览器

    这篇文章主要介绍了使用javascript实现判断当前浏览器的类型及版本,虽然不是很全面,但是还是推荐给大家,简单学下方法和思路。
    2015-04-04
  • Javascript Tab 导航插件 (23个)

    Javascript Tab 导航插件 (23个)

    实现tab页很多方法,有一些是用纯CSS实现,其他大多数是基于jquery、mootools或者其他js框架实现,既然有这么多可以拿来即用的插件,又何苦重复造轮子。
    2009-06-06
  • JavaScript中数据结构与算法(四):串(BF)

    JavaScript中数据结构与算法(四):串(BF)

    这篇文章主要介绍了JavaScript中数据结构与算法(四):串(BF),串是由零个或多个字符组成的有限序列,又叫做字符串,本文着重讲解了BF(Brute Force)算法,需要的朋友可以参考下
    2015-06-06
  • JS Replace 全部替换字符的用法小结

    JS Replace 全部替换字符的用法小结

    本篇文章主要是对JS Replace 全部替换字符的用法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • js怎么判断flash swf文件是否加载完毕

    js怎么判断flash swf文件是否加载完毕

    因为我一直不知道该怎么判断swf文件是否加载完毕,于是想用js来实现这个功能,需要的朋友可以参考下
    2014-08-08
  • JS正则匹配中文的方法示例

    JS正则匹配中文的方法示例

    这篇文章主要介绍了JS正则匹配中文的方法,结合具体实例形式分析了JS针对中文的匹配操作相关技巧与注意事项,需要的朋友可以参考下
    2017-01-01
  • three.js中多线程的使用及性能测试详解

    three.js中多线程的使用及性能测试详解

    这篇文章主要给大家介绍了关于three.js中多线程的使用及性能测试的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • JS文本框默认值处理详解

    JS文本框默认值处理详解

    以下代码是对JS文本框的默认值处理进行了介绍,需要的朋友可以参考下
    2013-07-07

最新评论