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中控制了。本代码支持所有直流浏览器！兼容性还是可以的！欢迎交流！