`

JS Image对象图片类型合法性

ChromeIESafariOperaJavaScript 
阅读更多
有时候文件名后缀是可以伪装的，比如说将一个记事本文件xx.txt改成xx.jpg，这时候只利用后缀来判断选取的文件是否满足条件就不靠谱了,此时Image对象就派上用场了。
如果图片无法显示那当然是不正确的格式了，会引发onerror事件，代码如下： 

var img = new Image();
img.onload = function(){
	alert('load');
};
img.onabort = function(){
	alert('abort');
};
img.onerror = function(){
	alert('error');
};
img.src='http://www.google.com/logo_cn.gif';
var _img_ = document.getElementById('imgplace');

另外onabort事件目前仅有IE支持，FF,Opera,Chrome,Safari统统不支持。
FAQ：如何激活Image对象的abort事件？
A:弄一张超级大的图片（比如说4M），等浏览器载入到一半的时候按停止载入。
-EOF-


另外一段网上的代码 
<HTML> 
<HEAD> 
</HEAD> 
<script language="javascript"> 
var img=null; 
function check(file) 
{ 
img=document.createElement("img"); 
img.attachEvent("onreadystatechange",isimg); 
img.attachEvent("onerror",notimg); 
img.src=file; 
} 
function notimg() 
{ 
    alert("您插入的不是图片，请重新选择插入"); 
return false; 
} 
function isimg() 
{   
   alert("图片大小" + Math.round(img.fileSize/1024) +"KB\r图片宽度"+ img.offsetWidth +"\r图片高度"+ img.offsetHeight); 
} 
</script> 
<BODY> 
  <input type="file" name="" onchange="check(this.value)"/> 
</BODY> 
</HTML>

分享到：
| js 图片 验证 大小 格式 内容（完整）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js判断图片真实性（非判断文件后缀）

    当然，为了覆盖更多的图片格式，我们需要扩展检查逻辑，增加更多图片类型的二进制头识别。例如，JPEG文件的文件头是"\xFF\xD8"，而GIF文件的文件头是"GIF87a"或"GIF89a"。如果需要支持这些格式，只需在条件判断中...

    JS上传图片JS上传图片

    这里的accept属性可以限制用户只能选择图片类型文件。 三、JS处理 当用户选择文件后，我们可以监听`change`事件获取选中的文件： ```javascript document.getElementById('imageUpload').addEventListener('change...

    JS验证图片格式 有预览功能

    这个“JS验证图片格式 有预览功能”的主题主要关注如何利用JavaScript来检查用户上传的文件是否为合法的图片格式，并提供实时预览功能。以下将详细介绍这一技术实现的关键知识点。 1. **文件输入事件（File Input ...

    smartcropjs是一款用于剪裁图片的js插件它不会裁剪掉图片中重要的内容

    `image`参数是你要处理的图片对象，`options`是一个可选的对象，可以设置裁剪的宽高比、最小尺寸等。 - **处理结果**：`SmartCrop.crop()`方法返回一个Promise，解析后的结果包含多个候选的裁剪区域，每个区域都有...

    kindeditor图片上传携带token字段

    Token通常用于验证客户端请求的合法性，防止跨站请求伪造（Cross-Site Request Forgery, CSRF）攻击。在图片上传过程中，服务器通常要求客户端提供一个有效的token，以确保上传操作是由合法用户发起的。 KindEditor...

    图片上传本地预览插件

    - CSRF令牌：防止跨站请求伪造攻击，确保上传操作的来源合法性。 - 文件名重命名：避免上传的文件名冲突，同时防止恶意文件名带来的安全风险。 8. 兼容性处理： - 对于不支持File API的老版本浏览器，需要提供...

    在微信小程序里上传图片到腾讯云的COS上存储桶

    'Content-Type': 'image/jpeg' // 根据图片类型设置 }, success: res =&gt; { console.log('上传成功:', res); }, fail: err =&gt; { console.error('上传失败:', err); } }); } }); } }); ``` 8. **总结*...

    图片上传，html页面，本地预览，后台前台页面代码都有

    JSP文件会接收前端发送的图片数据，验证其合法性，然后将其保存到服务器的特定目录。一个简单的JSP接收图片的示例可能是： ```jsp *,java.util.*" %&gt; Part filePart = request.getPart("image"); String ...

    利用Ajax 和一般处理程序上传图片到指定文件夹.rar

    // 进行文件合法性检查，例如：检查是否为图片文件 if (file.type.startsWith('image/')) { var formData = new FormData(); formData.append('image', file); var xhr = new XMLHttpRequest(); xhr.open('...

    获取网络图片

    例如，在JavaScript中，可以创建一个新的`Image`对象，然后设置其`src`属性为图片的URL，浏览器会自动下载图片。在Python中，可以使用requests库发送GET请求获取图片的二进制数据，再将其保存到本地。 ```...

    前端图片上传压缩

    3. **Image对象**：在JavaScript中，可以创建Image对象来加载图片，然后利用这个对象来获取图片的原始尺寸，以便计算压缩比例。 4. **质量调整**：在使用Canvas压缩图片时，可以设置`toDataURL()`方法的第二个参数...

    图片上传检测及预览.

    - **合法性检查**：确保上传的图片不是恶意代码或脚本伪装的，可以通过读取图片二进制数据进行验证。 **2. 图片预览** 图片预览功能可以让用户在正式上传前看到图片的效果，这样他们可以在上传前调整图片大小、角度...

    【JavaScript源代码】js实现头像上传并且可预览提交.docx

    通过以上步骤，我们能够确保只有合法的图片文件才能被预览和最终上传到服务器。需要注意的是，这种方法依赖于现代浏览器提供的API，因此在实际部署时应考虑不同浏览器的兼容性问题。此外，还需要确保服务器端的逻辑...

    JSP图片上传／放大缩小／裁减的源代码

    - `testlength()`方法检查图片大小是否超过限制，`testpictype()`方法验证图片类型是否合法。 - 在JSP页面中，通过`&lt;jsp:useBean&gt;`标签实例化并初始化这个JavaBean。 3. **Servlet处理**： - 在Servlet中，使用`...

    js多张图片gif动画特效

    3. **图片加载与处理**：在JavaScript中，使用`new Image()`创建Image对象来预加载图片。一旦图片加载完成，可以通过监听`onload`事件来处理它们。图片可以使用CSS变换，如旋转、缩放、淡入淡出等，以增加动画效果。...

    验证上传图片

    标题“验证上传图片”涉及到的是一个常见的Web开发功能，即用户通过网页上传图片，并进行合法性验证。这个过程包括但不限于文件类型检查、文件大小限制、图片尺寸校验等多个方面。接下来，我们将深入探讨这一主题。 ...

    asp.net文件与图片处理

    客户端检查通常使用JavaScript进行，限制用户只能选择特定类型的文件，例如限制为图片格式。但客户端检查仅作为增强用户体验，不能完全依赖，因为客户端检查容易被绕过。 4. **服务器端检查上传文件类型**： ...

    js写的小游戏--类推箱子

    JavaScript可以使用Image对象预加载图片资源，确保游戏开始时所有图片都已就绪。对于声音，HTML5的Audio API提供了播放、暂停、音量控制等功能，使得游戏可以添加背景音乐或音效，提升用户体验。 总的来说，"js写的...

    vue的style绑定background-image的方式和其他变量数据的区别详解

    对于background-image，我们需要将图片的路径或URL作为字符串放入样式对象中。例如： ```html &lt;div v-bind:style="{ backgroundImage: 'url(' + item.videopic + ')' }"&gt; ``` 在这个例子中，我们假设item.videopic...

    自己写的一个图片上传功能

    JavaScript可以用来处理用户选择的文件，例如限制文件类型或大小，显示预览图像等。 2. **文件选择事件**： 当用户选择文件后，前端会触发`change`事件，通过`event.target.files`获取到文件对象列表。这些文件...

Magicbox
Global site tag (gtag.js) - Google Analytics