input file 文件上傳,js控制上傳文件的大小和格式
阿新 • • 發佈：2018-04-28
chan method filesyste com scripting span size gif post
文件上傳一般是用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