JavaScript-js如何判断上传文件的类型及大小,并兼容各种浏览器

WP主题Bug提交 WP主题Bug提交 主题:1067 回复:2226

JavaScript-js如何判断上传文件的类型及大小,并兼容各种浏览器

清晨说ぺ晚安 发布于 2017-06-05 字数 63 浏览 1138 回复 3

其中判断文件的类型不只判断后缀名,要判断文件的真实格式。

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(3

清晨说ぺ晚安 2017-10-06 3 楼

分享一个我正在使用的Javascript类,不过需要特别说明的是,对于文件类型的检查,是通过看其扩展名来实现的,这个可能不能满足您的要求。不过该类本身使用起来还是比较方便的,些许地方兴许可以参考下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
UpLoadFileCheck=function()
{
this.AllowExt=".jpg,.gif";//允许上传的文件类型 0为无限制 每个扩展名后边要加一个"," 小写字母表示
this.AllowImgFileSize=0;//允许上传文件的大小 0为无限制 单位:KB
this.AllowImgWidth=0;//允许上传的图片的宽度 0为无限制 单位:px(像素)
this.AllowImgHeight=0;//允许上传的图片的高度 0为无限制 单位:px(像素)
this.ImgObj=new Image();
this.ImgFileSize=0;
this.ImgWidth=0;
this.ImgHeight=0;
this.FileExt="";
this.ErrMsg="";
this.IsImg=false;//全局变量

}

UpLoadFileCheck.prototype.CheckExt=function(obj)
{
this.ErrMsg="";
this.ImgObj.src=obj.value;
//this.HasChecked=false;
if(obj.value=="")
{
this.ErrMsg="/n请选择一个文件";
}
else
{
this.FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();
if(this.AllowExt!=0&&this.AllowExt.indexOf(this.FileExt)==-1)//判断文件类型是否允许上传
{
this.ErrMsg="/n该文件类型不允许上传。请上传 "+this.AllowExt+" 类型的文件,当前文件类型为"+this.FileExt;
}
}
if(this.ErrMsg!="")
{
this.ShowMsg(this.ErrMsg,false);
return false;
}
else
return this.CheckProperty(obj);
}

UpLoadFileCheck.prototype.CheckProperty=function(obj)
{
if(this.ImgObj.readyState!="complete")//
{
sleep(1000);//一秒使用图能完全加载
}

if(this.IsImg==true)
{
this.ImgWidth=this.ImgObj.width;//取得图片的宽度
this.ImgHeight=this.ImgObj.height;//取得图片的高度
if(this.AllowImgWidth!=0&&this.AllowImgWidth<this.ImgWidth)
this.ErrMsg=this.ErrMsg+"/n图片宽度超过限制。请上传宽度小于"+this.AllowImgWidth+"px的文件,当前图片宽度为"+this.ImgWidth+"px";

if(this.AllowImgHeight!=0&&this.AllowImgHeight<this.ImgHeight)
this.ErrMsg=this.ErrMsg+"/n图片高度超过限制。请上传高度小于"+this.AllowImgHeight+"px的文件,当前图片高度为"+this.ImgHeight+"px";
}

this.ImgFileSize=Math.round(this.ImgObj.fileSize/1024*100)/100;//取得图片文件的大小
if(this.AllowImgFileSize!=0&&this.AllowImgFileSize<this.ImgFileSize)
this.ErrMsg=this.ErrMsg+"/n文件大小超过限制。请上传小于"+this.AllowImgFileSize+"KB的文件,当前文件大小为"+this.ImgFileSize+"KB";

if(this.ErrMsg!="")
{
this.ShowMsg(this.ErrMsg,false);
return false;
}
else
return true;
}

UpLoadFileCheck.prototype.ShowMsg=function(msg,tf)//显示提示信息 tf=false 显示错误信息 msg-信息内容
{
/msg=msg.replace("/n","<li>");
msg=msg.replace(//n/gi,"<li>");
/
alert(msg);
}
function sleep(num)
{
var tempDate=new Date();
var tempStr="";
var theXmlHttp = new ActiveXObject( "Microsoft.XMLHTTP" );
while((new Date()-tempDate)<num )
{
tempStr+="/n"+(new Date()-tempDate);
try{
theXmlHttp .open( "get", "about:blank?JK="+Math.random(), false );
theXmlHttp .send();
}
catch(e){;}
}
//containerDiv.innerText=tempStr;
return;
}
function c(obj)
{
var d=new UpLoadFileCheck();
d.IsImg=true;
d.AllowImgFileSize=100;
d.CheckExt(obj)
}
</script>
</head>
<body>
<input name="" type="file" />

</body>

</html>

虐人心 2017-08-13 2 楼

楼上两段代码,经测试在chrome浏览器不行!
出于安全考虑,浏览器不允许加载本地图片。

LZ可以再看看使用HTML5新API实现:
详细教程:http://www.html5rocks.com/zh/tutorials/file/dndfiles/
使用HTML5新API:

 <input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
function handleFileSelect(evt) {
var files = evt.target.files; //文件列表对象(经测试,即使"input"标签没设置“multiple”,返回的files还是数组)

// “files”是File的对象数组. 以下代码列出File的一些属性.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
  output.push('&lt;li&gt;&lt;strong&gt;', escape(f.name), '&lt;/strong&gt; (', f.type || 'n/a', ') - ',
              f.size, ' bytes, last modified: ',
              f.lastModifiedDate.toLocaleDateString(), '&lt;/li&gt;');
}
document.getElementById('list').innerHTML = '&lt;ul&gt;' + output.join('') + '&lt;/ul&gt;';

}

document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

归属感 2017-07-21 1 楼

js好像不能判断上传文件的真实格式,这个得用服务器脚本判断,至于文件大小如果是image文件可以直接判断,如果是其他文件也只能在html5里能判断:

<input type="file" id="myfile" name="myfile" size="20" onchange="check_extension(this.value,"upload");"/>
<input type="submit" id="upload" name="upload" value="上传" disabled="disabled" />

var hash = {
'gif' : 1,
'jpg' : 1,
};

function check_extension(filename,submitId) {
var re = /..+$/;
var ext = filename.match(re);
var submitEl = document.getElementById(submitId);
if (hash[ext]) {
//下面是判断文件大小
img=document.createElement("img");
img.src=filename;
if(img.fileSize>102400){
alert("图片尺寸请不要大于100KB");
submitEl.disabled = true;
return false;
}else{
submitEl.disabled = false;
return true;
}
} else {
alert("只能输入gif或者jpg格式的图片");
submitEl.disabled = true;

    return false;
  }

}

//如果你上传的不是图片文件的话,js好像只能在html5下判断文件大小

if (typeof FileReader !== "undefined") {
var size = document.getElementById('myfile').files[0].size;
// check file size
}