JS判断input上传图片的真实类型（非后缀判断）

最新推荐文章于 2024-07-15 08:30:00 发布
最新推荐文章于 2024-07-15 08:30:00 发布
阅读量715 收藏 1
点赞数
分类专栏： jq
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38152494/article/details/122342556
版权

JavaScript FileReader MIME类型 图片识别 async
关键词由CSDN通过智能技术生成

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>判断图片类型</title>

    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
  </head>

  <body>
    <input type="file" multiple="true" id="upload" />
  </body>
  <script type="text/javascript">
   function checkRealMimeType(file, callback) {
        let realMimeType
        let reader = new FileReader()
        //running asynchronously!
        reader.onloadend = function () {
          let arr = new Uint8Array(reader.result).subarray(0, 4)
          let header = ''
          for (let i = 0; i < arr.length; i++) {
            header += arr[i].toString(16)
          }
          console.log(header)
          //在这里可以得到上传图片的真实mintype类型
          //在这里执行你的逻辑，该方法是异步执行
          if (header.indexOf('8950') === 0) {
            realMimeType = 'png'
          } else if (header.indexOf('424d') === 0) {
            realMimeType = 'bmp'
          } else if (header.indexOf('ffd8') === 0) {
            realMimeType = 'jpeg'
          } else {
            realMimeType = null
          }
          console.log(realMimeType)
        }
        reader.readAsArrayBuffer(file)
      }
    $('#upload').on('change', function (e) {
   		checkRealMimeType($('#upload')[0].files[0])
    })
    
  </script>
</html>
下一页继续
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
input选择图片，提交图片进行识别
PengZhaoYe的博客
02-14 278
input选择图片，提交图片进行识别
[JS真好玩] 图片文件没后缀，怎么判断图片类型？
Web_boom的博客
09-09 1092
我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，联系我，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费无广告。还独立开发了《合成大西瓜重制版》。还开发了参加Game Jam 2022。《教你做小游戏》、《极致用户体验》。
js判断图片真实性（非判断文件后缀）
09-10
注！并不是通过常规判断文件后缀实现过滤。 非常简单实用的假图片过滤机制，可识别过滤其它文件篡改为图片格式的文件。
js判断判断上传文件的类型是否为 图片
码农键盘上的梦
08-07 2124
然后，使用startsWith方法判断类型是否以’image/'开头，如果是，则表示文件类型为图片，返回true；上面的代码中，首先通过getElementById获取到一个file input元素，然后获取用户选择的文件对象，假设它是第一个文件，然后调用isImage函数来判断文件类型是否为图片，并将结果输出到控制台。可以使用JavaScript的File对象的type属性来判断文件的类型是否为图片。可以在需要判断文件类型的地方调用这个函数，传入需要判断的文件对象，来进行判断。
【JavaScript 】获取真实的文件类型
最新发布
weixin_47351913的博客
07-15 666
某些文件类型可能具有相同的或类似的头部，而且有些文件可能不遵循标准的文件签名，因此这种方法可能无法准确识别所有类型的文件。此外，文件可能被修改或封装在其他格式中，这也会影响检测的准确性。为此我们可以通过读取文件的二进制数据的前几个字节（通常称为“魔法数字”或文件签名）来尝试识别文件的类型。在系统上传文件时，有用户会直接修改文件名后缀，使其与系统要求一致后再上传，而html+javascript常用的上传文件方法难以判断文件的真实类型（此处也易恶意上传脚本文件的情况）
前端JS获取图片文件的真实格式
jimojianghu的专栏
11-17 3962
浏览器支持的图片格式中，除了svg以外，其他几种位图格式，都可以较好的通过读取图像二进制数据的方式判断出图片文件的真实格式，能够防止文件伪造绕开判断，造成不必要的异常等问题。
JavaScript如何判断input数据类型
11-20
这篇文章主要介绍了JavaScript如何判断input数据类型,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在HTML中接收用户输入信息一般都会用到<input/>。我...
JavaScript判断文件上传类型的方法
10-25
本文将介绍如何用JavaScript判断文件上传类型的方法，以及如何处理用户上传相同文件时触发onchange事件的问题。 首先，文件上传功能的实现依赖于HTML的`<input>`标签，通过设置其`type`属性为`file`，可以创建一个...
jQuery实现判断上传图片类型和大小的方法示例
10-18
本文将详细介绍如何使用jQuery来实现对上传图片类型和大小的判断，并结合实例来说明操作技巧。 首先，我们需要注意的是，在HTML中通常使用`<input type="file">`元素来让用户选择文件进行上传。在JavaScript中，...
检测上传图片的大小,宽,高及格式的JS
十方地藏
07-22 901
01.htm-----------------------------------------------------------------------------无标题文档    UpLoadFileCheck=function()    {                    this.AllowExt=".jpg,.gif";//允许上传的文件类型 0为无限制 每个扩展名后边要加一个",
后端判断图片真实性（非后缀判断）.rar
09-10
后端判断前端传过来的图片文件的真实性，非判断文件后缀。。. 代码量少，十分简单实用，可以过滤一些其它文件篡改后缀伪装图片的假图片。
前端JavaScript获取图片文件的真实格式
郊眠寺
02-10 1907
浏览器支持的图片格式中，除了svg以外，其他几种位图格式，都可以较好的通过读取图像二进制数据的方式判断出图片文件的真实格式，能够防止文件伪造绕开判断，造成不必要的异常等问题。最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
js 验证图片格式
qq_33240556的博客
01-09 979
注意：这个函数只能验证文件扩展名是否符合要求，不能验证文件的内容是否为图片。如果需要验证文件内容，你可能需要使用更复杂的方法，如FileReader API或者使用一些库（如Jimp）来读取和处理图片。这个函数使用了一个正则表达式，它匹配以jpg、jpeg、png、gif或bmp结尾的字符串。如果文件名符合这个模式，函数就会返回true，表示这是一个有效的图片文件；此外，请注意处理可能出现的错误，例如文件不存在或无法读取等。在生产环境中使用时，你可能需要添加一些错误处理代码来确保程序的稳定性和用户体验。
检查是否是图片、限制上传像素、图片上传时预览、点击预览图在新页面查看原图、上传图片
small_emotion的博客
12-27 733
在做网站后台管理时，涉及到了图片的上传，经过多次改动后，上传图片的一系列步骤如下 1.在点击浏览按钮时弹出框只出现图片格式的文件，可在input type=file中通过accept=&amp;amp;quot;.jpg,.png,.jpeg&amp;amp;quot; 限制。 增加限制前： 增加限制后： 但在上图标红处选择所有文件时又会出现不是图片的文件，因此进行第二步，在js中再增加判断 2.在js中判断上传的文件是否是图片 3.判断上传图...
js验证是否是图片
ganlangreen的专栏
11-23 881
var img=null; function check(file) { img=document.createElement("img"); img.attachEvent("onreadystatechange",isimg); img.attachEvent("onerror",notimg); img.src=file; } function...
input type = file上传图片限制大小、类型判断、像素判断
热门推荐
如果我年少有为不自卑
11-09 1万+
在项目中经常用到input标签来上传文件，而这些文件通常是图片文件。图片有很多格式我们只需要其中的几种，就需要对用户上传的文件进行验证，在HTML5中有一个新的属性：accept文件类型限制。但是通常我们会用javascript或jQuery编写方法进行验证图片的大小限制、类型判断、像素判断。 &amp;lt;input type=&quot;file&quot; name=&quot;files&quot; id=&quot;file&quot; o
通过input上传图片，判断不同浏览器及图片类型和大小的js代码
06-08
以下是一个基本的实现方案，可以用于判断不同浏览器和图片类型、大小： ```javascript function validateImage(file) { // 获取文件类型和大小 var fileType = file.type; var fileSize = file.size; // 判断文件类型 if (fileType !== "image/png" && fileType !== "image/jpg" && fileType !== "image/jpeg") { alert("只支持 png, jpg 和 jpeg 格式的图片"); return false; } // 判断文件大小 if (fileSize > 5 * 1024 * 1024) { alert("文件大小不能超过 5MB"); return false; } // 判断浏览器类型 var isIE = navigator.userAgent.indexOf("Trident") !== -1; var isEdge = navigator.userAgent.indexOf("Edge") !== -1; var isChrome = navigator.userAgent.indexOf("Chrome") !== -1; if (isIE || isEdge) { // IE 和 Edge 浏览器 var objImg = document.createElement("img"); objImg.src = file.value; if (objImg.fileSize > 5 * 1024 * 1024) { alert("文件大小不能超过 5MB"); return false; } } else if (isChrome) { // Chrome 浏览器 var img = new Image(); img.src = window.URL.createObjectURL(file); img.onload = function() { if (this.width > 1920 || this.height > 1080) { alert("图片宽度不能超过 1920px，高度不能超过 1080px"); return false; } }; } return true; } // 监听上传图片事件 var fileInput = document.getElementById("fileInput"); fileInput.addEventListener("change", function() { var file = this.files[0]; if (validateImage(file)) { // 图片验证通过，可以进行上传操作 // ... } }); ``` 注意：以上代码仅为基本实现方案，可能存在一些兼容性问题和安全性问题，具体需要根据实际情况进行优化和改进。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值