欢迎访问 生活随笔!

生活随笔

当前位置: 首页 >

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

发布时间:2024/4/13 37 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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[

总结

以上是生活随笔为你收集整理的input file 文件上传,js控制上传文件的大小和格式的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。