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中控制了。本代碼支持所有直流瀏覽器！兼容性還是可以的！歡迎交流！