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）

赞 (0)

相关推荐

  • js判断上传文件的类型和大小示例代码

    复制代码 代码如下: //检测文件大小和类型 function fileChange(target){ //检测上传文件的类型 if(!(/(?:jpg|gif|png|jpeg)$/i.test(target.value))) { alert("只允许上传jpg|gif|png|jpeg格式的图片"); if(window.ActiveXObject) {//for IE target.select();//select the file ,and clear selection d

  • 多个上传文件用js验证文件的格式和大小的方法(推荐)

    html部分: <dsp:form action="${originatingRequest.requestURI}" method="post" enctype="multipart/form-data"> <dsp:input type="file" bean="ReturngoodsFormHandler.uploadedFile1" id="uploadedFile1&q

  • 真正好用的js验证上传文件大小的简单方法

    真正好用的js验证上传文件大小的简单方法

    最近使用到一个文件上传功能,发现恶意上传一个2G文件时,后台处理响应较慢,遂想到能否使用js来进行客户端的验证.但查阅网上多处资料,均使用 ActiveXObject("Scripting.FileSystemObject"); 的方法,该方法需要将Internet选项中安全级别提高,启用一个系统本身不推荐的选项,会出现如下非常不友好的提示: 所以这边并没有用到,而是寻求其他方法. 这边新的思路是img标签中的dynsrc属性. 在FireFox.Chrome浏览器中可以根据docum

  • 客户端js判断文件类型和文件大小即限制上传大小

    由于项目需要!需要脚本在客户端判断大小和文件类型!自己网上找资料找的好辛苦!索性自己写了一个并测试 文件上传大小限制的一个例子,兼容ie6,ie7,ie8 ,Google Chrome,ff等浏览器 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="

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

    我们在做文件上传时,为了实现异步上传的效果,一般会选择采用iframe的形式来进行文件的上传,但我们不能像ajax那样对服务端返回的数据进行处理,从而来进行文件大小以及文件样式的判断,所以我们一般也会想到使用js对上传的文件大小以及格式进行初步的判断,在服务端再进行一次判断(防止浏览器拒绝执行脚本文件). 以下提供一种方法用js判断文件大小. 复制代码 代码如下: var url = window.location.href, type = url.substr(url.lastIndexOf(

  • 限制上传文件大小和格式的jQuery插件实例

    本文实例讲述了限制上传文件大小和格式的jQuery插件.分享给大家供大家参考.具体分析如下: 在客户端上传文件,通常需要限制文件的尺寸和格式,最常用的做法是使用某款插件,一些成熟的插件的确界面好看,且功能强大,但美中不足的是:有时候会碰到浏览器兼容问题.本篇就来写一个"原生态"的jQuery插件,使之能限制上传文件的大小和格式. 首先,写一个名称为checkFileTypeAndSize.js的插件.通过判断当前文件的后缀名是否被包含在预先设置所允许的后缀名数组中,来限制文件格式:通过

  • js判断上传文件后缀名是否合法

    js判断上传文件后缀名是否合法

    本文实例介绍了js判断上传文件后缀名是否合法的详细代码,分享给大家供大家参考,具体内容如下 效果图: 选择文件 选择1.jpg文件 上传成功合法 除图片文件格式以外,其他都是不合法的操作. 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>判断文件上传是否合法</tit

  • golang简单获取上传文件大小的实现代码

    本文实例讲述了golang简单获取上传文件大小的方法.分享给大家供大家参考,具体如下: 复制代码 代码如下: package main import (     "fmt"     "io"     "net/http"     "log"     "os" ) // 获取文件大小的接口 type Size interface {     Size() int64 } // 获取文件信息的接口 type S

  • js判断上传文件类型判断FileUpload文件类型代码

    asp.net中html标签代码: 复制代码 代码如下: <asp:FileUpload ID="fuMain" runat="server" /> <asp:Button ID="btnUpload" runat="server" OnClientClick="return CheckWorkFile()" Text="上传" /> 普通的html标签: 复制代

  • js获取上传文件大小示例代码

    代码如下: 在ie下,貌似要改安全设置中的[对为标记为可安全执行脚本的ActiveX空间初始化并执行]那项 复制代码 代码如下: <html> <head> <script type="text/javascript"> var isIE = /msie/i.test(navigator.userAgent) && !window.opera; function fileChange(target) { var fileSize =

  • vue.js异步上传文件前后端实现代码

    本文实例为大家分享了vue.js异步上传文件的具体代码,供大家参考,具体内容如下 上传文件前端代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8&qu

  • javascript实现限制上传文件大小

    前言: 项目中经常用到需要上传文件.照片等功能,同时需要限制所上传文件的大小.很多插件都会采用后台请求验证,前端Js校验比较少.本篇介绍一个前端JS便捷判断上传文件大小的方法. 代码很简单,关键就是怎么用JS拿到文件然后获取文件大小,进而去判断拦截.由于各种历史原因,IE的ActiveX控件因素,获取文件的方法可能和其他浏览器有所不同,所以只需稍加判断即可. JS代码: 复制代码 代码如下: <script type="text/javascript">       //

随机推荐