首页 > 代码库 > input file 文件上传,js控制上传文件的大小和格式
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代码:
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
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;