炫意html5
最早CSS3和HTML5移动技术网站之一

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

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

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

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

贴出html代码:

<form  action="后端接口" enctype="multipart/form-data" method="post">
<div>
<div>附件:</div>
<div><input type="file" name="file"  onchange="fileChange(this);" /> </div>
</div>
<div>
<div>文件上限2MB</d
</div>
<div>
<div><input type="file" name="files"  onchange="filefujianChange(this);" /> <input type="hidden" name="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中控制了。本代码支持所有主流浏览器!兼容性还是可以的!欢迎交流!

备注:有朋友留言说这个案例不好用,刚刚测试了一直,一切正常,只不过忘记了isIE忘记声明了,大家在js开头声明isIE就可以了!

var isIE = /msie/i.test(navigator.userAgent) && !window.opera; 

有调试不成功的再测试一下!

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

Java基础教程Android基础教程