當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

js 图片类型mage/jpeg， image/bmp， image/gif ，image/png

發布時間：2023/12/20 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 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”解釋如下

修飾符

修飾符用于執行區分大小寫和全局匹配:

修飾符描述

i	執行對大小寫不敏感的匹配。
g	執行全局匹配（查找所有匹配而非在找到第一個匹配后停止）。
m	執行多行匹配。

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。?

測試結果如下：

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

?以上內容參考：上傳type中jpg是image/jpeg還是image/pjpeg_百度知道

js判斷上傳圖片格式類型、尺寸大小

轉載：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;} }

js實現上傳圖片類型+大小+尺寸驗證

Note：

1、每一個驗證可以單獨拆開去。只需要花費一點點功夫處理傳參，返回

2、verificationPicType類型驗證函數和 verificationPicSpace大小驗證函數是實時的。直接可以用函數的返回值做判斷，處理之后業務邏輯。

3、但是verificationPicSize尺寸驗證函數的返回不能直接用。因為內部圖片加載是異步的，函數的返回值不是基于圖片尺寸大小判斷的結果。只能利用錯誤提示。根本原因是內部使用FileReader對象。

FileReader?對象允許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩沖區）的內容，使用?File?或?Blob?對象指定要讀取的文件或數據。

參考連接：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)){//尺寸驗證不能在判斷條件。//因為內部圖片加載是異步的，函數的返回值不是基于圖片尺寸大小判斷的結果。只能利用錯誤提示verificationPicSize(that,allow_size_obj);return true;}return false; } /** * 圖片類型驗證 * @allow_type_arr ['jpg','png'],如果數組為空則表示不限 */ 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轉換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){//讀取圖片數據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>

總結

以上是生活随笔為你收集整理的js 图片类型mage/jpeg， image/bmp， image/gif ，image/png的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： i9502移植rom包进程记录
下一篇：交换机Access和Trunk的配置与删