js 图片类型mage/jpeg， image/bmp， image/gif ，image/png
cplvfx作者推薦代碼
//判斷圖片類型是否支持上傳，支持true,不支持false function Chacktypefun(name) {return /\.(gif|jpg|jpeg|png)$/i.test(name)} var Name1="微信圖片_20220331110240.jpg"Chacktypefun(Name1)//返回true?test() 方法用于檢測一個字符串是否匹配某個模式.
/\.(gif|jpg|jpeg|png)$/i? ? 這段代碼是正則表達式，其中的“i”解釋如下
修飾符
修飾符用于執(zhí)行區(qū)分大小寫和全局匹配:
| i | 執(zhí)行對大小寫不敏感的匹配。 |
| g | 執(zhí)行全局匹配（查找所有匹配而非在找到第一個匹配后停止）。 |
| m | 執(zhí)行多行匹配。 |
var imgType=['gif','jpeg','jpg','png'] var imgfileType=['image/gif','image/jpeg','image/jpg','image/pjpeg','image/x-png','image/png']
上傳圖片時:
ie會把 jpg、jpeg翻譯成image/pjpeg，png翻譯成image/x-png。
而火狐則很標準：jpg、jpeg翻譯成image/jpeg，png翻譯成image/png。?
測試結(jié)果如下：
firefox ：image/jpeg， image/bmp， image/gif ，image/png
ie 6 ：image/pjpeg ，image/bmp， image/gif ，image/x-png
ie 7： image/pjpeg ，image/bmp， image/gif， image/x-png
ie 8： image/pjpeg， image/bmp ，image/gif， image/x-png
?以上內(nèi)容參考：上傳type中jpg是image/jpeg還是image/pjpeg_百度知道
?
js判斷上傳圖片格式類型、尺寸大小
轉(zhuǎn)載：js判斷上傳圖片格式類型、尺寸大小_王一一的博客的博客-CSDN博客_js判斷圖片格式
//判斷圖片類型 var f=document.getElementById("File1").value; if(f==" "){ alert("請上傳圖片");return false; }else{if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(f)){alert("圖片類型必須是.gif,jpeg,jpg,png中的一種")return false;} } function CheckFile(f,p){//判斷圖片尺寸var img=null;img=document.createElement("img");document.body.insertAdjacentElement("beforeend",img);img.style.visibility="hidden"; img.src=f;var imgwidth=img.offsetWidth;var imgheight=img.offsetHeight;if(p.name=="UpFile_Photo1"){if(imgwidth!=68||imgheight!=68){alert("小圖的尺寸應(yīng)該是68x68");}}if(p.name=="UpFile_Photo2"){if(imgwidth!=257||imgheight!=351){alert("中圖的尺寸應(yīng)該是257x351");}}if(p.name=="UpFile_Photo3"){if(imgwidth!=800||imgheight!=800){alert("大圖的尺寸應(yīng)該是800x800");}}//判斷圖片類型if(!/\.(gif|jpg|jpeg|bmp)$/.test(f)){alert("圖片類型必須是.gif,jpeg,jpg,bmp中的一種")return false;}return true; } <input type="file" id="UpFile_Photo1" runat="server" name="UpFile_Photo1" size="35" onpropertychange="CheckFile(this.value,this)">小圖<br /><input type="file" id="UpFile_Photo2" runat="server" name="UpFile_Photo2" size="35" onpropertychange="CheckFile(this.value,this)">中圖<br /><input type="file" id="UpFile_Photo3" runat="server" name="UpFile_Photo3" size="35" onpropertychange="CheckFile(this.value,this)">大圖<br />js實現(xiàn)上傳圖片類型+大小+尺寸驗證
Note：
1、每一個驗證可以單獨拆開去。只需要花費一點點功夫處理傳參，返回
2、verificationPicType類型驗證函數(shù) 和 verificationPicSpace大小驗證函數(shù)是實時的。直接可以用函數(shù)的返回值做判斷，處理之后業(yè)務(wù)邏輯。
3、但是verificationPicSize尺寸驗證函數(shù)的返回不能直接用。因為內(nèi)部圖片加載是異步的，函數(shù)的返回值不是基于圖片尺寸大小判斷的結(jié)果。只能利用錯誤提示。根本原因是內(nèi)部使用FileReader對象。
FileReader?對象允許Web應(yīng)用程序異步讀取存儲在用戶計算機上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用?File?或?Blob?對象指定要讀取的文件或數(shù)據(jù)。
參考連接：FileReader
好了，直接上代碼
<!DOCTYPE html> <html> <head><title></title><meta charset="utf-8"> </head> <body> <input type="file" name="files" id="file" onchange="verifyImageInfo(this,['jpg','png'],100,{'width':1280,'height':710})"></body> <script type="text/javascript"> //圖片驗證（大小，尺寸，類型） function verifyImageInfo(that,allow_type_arr,allow_space,allow_size_obj){if(verificationPicType(that,allow_type_arr)&& verificationPicSpace(that,allow_space)){//尺寸驗證不能在判斷條件。//因為內(nèi)部圖片加載是異步的，函數(shù)的返回值不是基于圖片尺寸大小判斷的結(jié)果。只能利用錯誤提示verificationPicSize(that,allow_size_obj);return true;}return false; } /** * 圖片類型驗證 * @allow_type_arr ['jpg','png'],如果數(shù)組為空則表示不限 */ function verificationPicType(that,allow_type_arr) {if(allow_type_arr.length==0) return true;var fileTypes = allow_type_arr;var filePath = that.value;//當括號里面的值為0、空字符、false 、null 、undefined的時候就相當于falseif(filePath){var isNext = false;var fileEnd = filePath.substring(filePath.indexOf(".")+1).toLowerCase();// console.log(fileEnd);for (var i = 0; i < fileTypes.length; i++) {if (fileTypes[i] == fileEnd) {isNext = true;break;}}if (!isNext){alert('不接受此文件類型');that.value = "";return false;}return true;}else {return false;} } /** * 圖片大小驗證 * @allow_space 400,如果值為0則表示不限 */ function verificationPicSpace(that,allow_space) {if(allow_space==0) return true;var fileSize = 0;var fileMaxSize = allow_space;var filePath = that.value;if(filePath){fileSize =that.files[0].size;var size = fileSize / 1024;//單位b轉(zhuǎn)換kb// console.log(size);if (size > fileMaxSize) {alert("文件大小超出限制！");that.value = "";return false;}else if (size <= 0) {alert("文件大小不能為0！");that.value = "";return false;}return true;}else{return false;} } /** * 圖片尺寸驗證 * @allow_size_obj {'width':123,"height":345},如果值為0則表示不限 */ function verificationPicSize(that,allow_size_obj) {var filePath = that.value;if(filePath){//讀取圖片數(shù)據(jù)var filePic = that.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!=allow_size_obj['width'] && allow_size_obj['width']!=0){alert("文件寬度"+width+"不符合要求");that.value = "";return false; }if(height!=allow_size_obj['height'] && allow_size_obj['height']!=0){alert("文件高度"+height+"不符合要求");that.value = "";return false; }return true;};image.src= data;};reader.readAsDataURL(filePic); }else{return false;} } </script> </html>總結(jié)
以上是生活随笔為你收集整理的js 图片类型mage/jpeg， image/bmp， image/gif ，image/png的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： i9502移植rom包进程记录
- 下一篇： 交换机Access和Trunk的配置与删