方法1

js

//驗證上傳文件大小和類型/*** * @param {this} value_ [獲取input對象，一般為this]* @param {[number]} size_ [文件限制的大小，單位為kb]* @param {[string]} type_ [文件類型，當前支持image和office]* @param {[function]} callback [驗證通過的回調]*/function fileValid (value_, size_, type_, callback) {var file = value_.files[0]var fileSize = (file.size / 1024).toFixed(0)var fileType = value_.value.substring(value_.value.lastIndexOf("."))if (fileSize > size_) {alert('文件過大')return false}switch (type_) {case 'image':if (!fileType.match(/.jpg|.jpeg|.gif|.png|.bmp/i)) {alert('請上傳圖片')return false;}break;case 'office':if (!fileType.match(/.doc|.docx|.xls|.xlsx|.ppt|.pptx/i)) {alert('請上傳word、excel或ppt文件')return false;}break;default:console.error('type_參數設置不正確！')return false;break;}callback()}

html

<input type="file" id="upload-file"><script>$('#upload-file').change(function() {fileValid(this, 2048, 'image', function() {alert('success')})}) </script>

方法2

html

<input type="file" name="files" id="file" onchange="verificationPicFile(this)">

js

function verificationPicFile(file) { var fileTypes = [".jpg", ".png"]; var filePath = file.value; //當括號里面的值為0、空字符、false 、null 、undefined的時候就相當于false if(filePath){ var isNext = false; var fileEnd = filePath.substring(filePath.indexOf(".")); for (var i = 0; i < fileTypes.length; i++) { if (fileTypes[i] == fileEnd) { isNext = true; break; } } if (!isNext){ alert('不接受此文件類型'); file.value = ""; return false; } }else { return false; }}//圖片大小驗證 function verificationPicFile(file) { var fileSize = 0; var fileMaxSize = 1024;//1M var filePath = file.value; if(filePath){ fileSize =file.files[0].size; var size = fileSize / 1024; if (size > fileMaxSize) { alert("文件大小不能大于1M！"); file.value = ""; return false; }else if (size <= 0) { alert("文件大小不能為0M！"); file.value = ""; return false; } }else{ return false; } }//圖片尺寸驗證 function verificationPicFile(file) { var filePath = file.value; if(filePath){ //讀取圖片數據 var filePic = file.files[0]; var reader = new FileReader(); reader.onload = function (e) { var data = e.target.result; //加載圖片獲取圖片真實寬度和高度 var image = new Image(); image.onload=function(){ var width = image.width; var height = image.height; if (width == 720 | height == 1280){ alert("文件尺寸符合！"); } else { alert("文件尺寸應為：720*1280！"); file.value = ""; return false; } }; image.src= data; }; reader.readAsDataURL(filePic); }else{ return false; } }

總結

以上是生活随笔為你收集整理的上传图片 可限制大小和文件类型的全部內容，希望文章能夠幫你解決所遇到的問題。

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