js验证input文件格式

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js验证input文件格式相关的知识,希望对你有一定的参考价值。

function checkImgType(ths)
if (ths.value == "")
alert("请上传图片");
return false;
else
if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(ths.value))
alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
return false;


return true;


<input id="TypePic" name="TypePic" title="image" type="file" onchange="checkImgType(this)"/>
<input id="BrokerPic" name="BrokerPic" title="image" type="file" onchange="checkImgType(this)" />

有多个input控件,验证上传格式不对后,怎么继续弹出选择文件框给用户重新选择文件

js判断文件格式及大小,参考如下:
//判断照片大小
function getPhotoSize(obj)
photoExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();//获得文件后缀名
if(photoExt!=\'.jpg\')
alert("请上传后缀名为jpg的照片!");
return false;

var fileSize = 0;
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
if (isIE && !obj.files)
var filePath = obj.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
var file = fileSystem.GetFile (filePath);
fileSize = file.Size;
else
fileSize = obj.files[0].size;

fileSize=Math.round(fileSize/1024*100)/100; //单位为KB
if(fileSize>=10)
alert("照片最大尺寸为10KB,请重新上传!");
return false;



jsp页面:

<input type="file" id="imgFile" name="upload" style="width:150px;" onchange="getPhotoSize(this)"/>
参考技术A function checkImgType(ths)
if (ths.value == "")
alert("请上传图片");
return false;
else
if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(ths.value))
alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
this.value="";
return false;


return true;
本回答被提问者和网友采纳
参考技术B 执行失败,在写javascript调用文件上传的onchange事件 参考技术C var ipt = document.getElementByTagName("input");
var ipttype = ipt.type;
alert("input类型:"+ipttype);
然后再去做判断
参考技术D document.getElementById("file的ID").cilck();追问

我的都是js自动生成的控件。
不知道怎么获取到当前的控件ID
我JS刚开始接触,工作需要
不太懂 麻烦说详细点 谢谢拉

追答

是可以取到的,你不是改变以后调用onchange时间么,checkImgType(this)
这个this.id就是那个空间的id
function checkImgType(ths)
if (ths.value == "")
alert("请上传图片");
return false;
else
if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(ths.value))
alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
return false;


return true;

在这个方法里,通过ths.id就能去到这个空间的id了

是可以取到的,你不是改变以后调用onchange时间么,checkImgType(this)
这个this.id就是那个空间的id
function checkImgType(ths)
if (ths.value == "")
alert("请上传图片");
return false;
else
if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(ths.value))
alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
return false;


return true;

在这个方法里,通过ths.id就能去到这个空间的id了

追问

我用ths.id 里面没有ID

我还没学JS,都是临时从网上找的JS代码

不好意思啊

要说的这么详细

追答

你去看看这个例子

function clp()
document.getElementById("File").click();

function ss(obj)
alert(obj.id);


clp

是可以取到这个ID的
你可以先给一个变量,然后alert(变量);试试看

input file 文件上传,js控制上传文件的大小和格式

文件上传一般是用jquery的uploadify,比较好用。后面会出文章介绍uploadify这个插件。

但是,有时候为了偷懒,直接就用input 的file进行文件和图片等的上传,input file 可以控制上传的格式,但是是html5,很多浏览器不支持,请看我的文章对input file上传类型的控制

下面我用javascript来控制文件上传的大小和类型。

贴出html代码:

<form  action="后端接口" enctype="multipart/form-data" method="post" id="attachment_uploads">
<div class="attachs fl">
<div class="t_fjfont">附件:</div>
<div class="upload_btns"><input type="file" name="file" id="file" onchange="fileChange(this);" /> </div>
</div>
<div class="attachs fl">
<div class="t_fjfont" style="color:red;font-size:12px;font-weight:bold">文件上限2MB</d
</div>
<div class="attachs fl">
<div class="upload_btns"><input type="file" name="files" id="file_fujian" onchange="filefujianChange(this);" /> <input type="hidden" name="rev" class="hide_rev" /></div>
</div>
</form>

javascript代码:

function fileChange(target) {
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 size = fileSize / 1024; if(size>2000){
alert("附件不能大于2M");
target.value="";
return
}
var name=target.value;
var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
if(fileName !="xls" && fileName !="xlsx"){
alert("请选择execl格式文件上传!");
target.value="";
return
}
}

function filefujianChange(target) { 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 size = fileSize / 1024;
if(size>2000){
alert("附件不能大于2M");
target.value="";
return
}
var name=target.value;
var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
if(fileName !="jpg" && fileName !="jpeg" && fileName !="pdf" && fileName !="png" && fileName !="dwg" && fileName !="gif" ){
alert("请选择图片格式文件上传(jpg,png,gif,dwg,pdf,gif等)!");
target.value="";
return
}
}

上面代码当时为了考虑兼容问题,没有写html5的文件上传控制,直接在js中控制了。本代码支持所有直流浏览器!兼容性还是可以的!欢迎交流!

2018-04-28更新

上面判断中的isIE是用来判断是否是IE浏览器的,不用的话可以直接去掉!

























































以上是关于js验证input文件格式的主要内容,如果未能解决你的问题,请参考以下文章

input file 文件上传,js控制上传文件的大小和格式

js前端验证上传的文件大小及格式

判断input[type=file]上传文件格式

js 校验时间格式

JS在页面根据数量改变总价及按钮进行格式验证

js,nodejs如何判断文件是啥编码格式