場景

在實現Excel導入數時，需要上傳excel格式的文件。

在前端js進行判斷，限制上傳文件的大小和格式。

實現

html頁面代碼可以通過accept屬性來篩選打開文件的格式。

?<form? class="dropzone"? id="dropzoneForm" enctype="multipart/form-data"><div class="fallback"><input name="file" value="1M以內的Excel文件" type="file" id="file_id"? accept=".xls,.xlsx" onchange="fileChange(this);" /></div></form>

然后在js中實現方法

function fileChange(target) {var fileSize = 0;fileSize = target.files[0].size;var size = fileSize / 1024;if(size>1000){alert("附件不能大于1M");target.value="";return false;?? //阻止submit提交}var name=target.value;var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();if(fileName !="xls" && fileName !="xlsx"){alert("請選擇Excel格式文件上傳(xls、xlsx)！");target.value="";return false;?? //阻止submit提交} }

效果

篩選打開文件格式

限制上傳文件格式

限制上傳文件大小

總結

以上是生活随笔為你收集整理的JS实现限制input上传文件的大小和格式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。