記一次簡單的圖片上傳驗證:

頁面:<input type="file" id="hiddenFile" onchange="uploadImage(event)" accept="image/jpg, image/jpeg, image/gif, image/png">立即上傳圖片js: function uploadImage(e) {//圖片的提前校驗,如果返回false,則代表校驗不成功if(!preSubmitFileCheck(e)){console.info("驗證失敗，顯示提示框");return;}//后面就是調用ajax,將圖片傳到后臺的圖片服務器或者文件服務器//然后ajax返回圖片上傳后的路徑,//最后在頁面渲染,供用戶點擊查看. }//ie瀏覽器必須是圖片的后綴,非ie還會校驗圖片大小,不能超過5兆 function preSubmitFileCheck(e){var fileTypes =["jpeg","jpg","png","gif"];if(window.navigator.userAgent.indexOf("MSIE")>=1){//ie瀏覽器//只看后綴是不是給定的四種,不是就不通過//ie暫時還沒有獲得文件大小的合適方法,歡迎前端大神在評論區補充var filePath = document.selection.createRange().text;var type = filePath.substring(filePath.lastIndexOf('.') + 1);for (var i = 0; i < fileTypes.length; i++) {if (fileTypes[i] == type) {typeFlag = true;break;}}if (!typeFlag) {alert("上傳格式不符，請重新上傳！");return false;}}else{//非ie瀏覽器var files = e.target.files, fs = files.length, s = 0;for (var i = 0; i < fs; i++) {var name = files[i].name;console.log("圖片大小:size:"+files[i].size)if(files[i].size > 5*1024*1024){//對圖片大小限制,大于5兆也不行sizeFlag = true;}var type = name.substring(name.lastIndexOf('.') + 1);typeFlag = false;for (var j = 0; j < fileTypes.length; j++) {if (fileTypes[j] == type) {typeFlag = true;break;}}if (!typeFlag || sizeFlag) {alert("上傳格式不符，請重新上傳！");}}}//到這里代表校驗通過了return true; }

總結

以上是生活随笔為你收集整理的[前台]---图片上传和校验的全部內容，希望文章能夠幫你解決所遇到的問題。

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