上传图片获取图片信息(兼容IE和火狐)资源-CSDN文库

共3个文件

js：1个

html：1个

project：1个

4星 · 超过85%的资源需积分: 9 16 浏览量 2012-11-22 10:16:18 上传评论收藏 35KB ZIP 举报

在开发Web应用时，我们经常需要处理用户上传的图片，包括获取图片的元数据，如尺寸、类型等。本文将详细讲解如何在JavaScript中实现一个跨浏览器（包括IE和Firefox）的图片信息获取方法。我们需要理解浏览器对图片文件的处理方式。在HTML5中，`<input type="file">`元素可以用于让用户选择本地文件，通过File API我们可以访问到这些文件。然而，不同的浏览器可能对File API的支持程度不同，特别是老版本的IE浏览器。 1. **FileReader接口**：这是获取图片信息的关键。`FileReader`对象提供了读取文件的方法，如`readAsDataURL()`，它可以把文件读取为DataURL，即一个包含base64编码的图片数据字符串。在这个过程中，我们可以通过监听`load`事件来获取读取完成后的结果。 ```javascript var fileInput = document.querySelector('input[type="file"]'); fileInput.addEventListener('change', function(event) { var file = event.target.files[0]; if (!file) return; var reader = new FileReader(); reader.onload = function(e) { var dataUrl = e.target.result; // 处理dataUrl }; reader.readAsDataURL(file); }); ``` 2. **兼容IE**：IE9及以下版本不支持`FileReader`，但它们提供了ActiveXObject，可以通过`new ActiveXObject("Microsoft.XMLDOM")`创建XML DOM对象，然后利用`load`方法加载图片文件，解析出DataURL。 ```javascript if (window.ActiveXObject) { var activeXObj = new ActiveXObject("Microsoft.XMLDOM"); activeXObj.async = "false"; activeXObj.load(file); var dataUrl = activeXObj.documentElement.innerText; } ``` 3. **获取图片元数据**：一旦有了DataURL，我们可以通过创建`Image`对象并赋值给`src`属性来预加载图片，然后通过`naturalWidth`和`naturalHeight`属性获取原始尺寸，通过`src`属性获取MIME类型。 ```javascript var img = new Image(); img.src = dataUrl; img.onload = function() { var width = img.naturalWidth; var height = img.naturalHeight; var mimeType = img.src.split(';')[0].replace('data:', ''); // 处理尺寸和MIME类型信息 }; ``` 4. **火狐浏览器的注意点**：Firefox有时可能会在`load`事件触发前就返回了`dataURL`，这时我们需要确保图片已经完全加载后再进行处理。可以使用`img.complete`属性检查图片是否已加载。 ```javascript if (!img.complete) { img.addEventListener('load', function() { // 图片加载完成后处理 }); } ``` 5. **安全和性能优化**：由于DataURL会把整个图片数据加载到内存中，对于大图片可能会消耗大量资源。可以考虑使用`FileReader`的`readAsArrayBuffer()`方法，配合`Blob.slice()`来分块读取，或者直接上传文件到服务器，让服务器处理图片信息。总结，实现上传图片获取图片信息的跨浏览器兼容方案，需要结合`FileReader`、`Image`对象以及针对旧版IE的ActiveXObject，同时注意事件触发的时机和浏览器的特性差异。这样，无论用户使用的是IE、Firefox还是其他现代浏览器，我们都能正确地获取和处理图片信息。

资源推荐

资源详情

资源评论

收起资源包目录

获取图片信息(兼容IE和火狐).zip （3个子文件）

获取图片信息(兼容IE和火狐)

.project 257B

index.html 3KB

jquery-1.7.2.min.js 93KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>index</title> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var allowType = "jpg,gif,png"; var allowSize = 4; var type = $("#type"); var size = $("#size"); var uploadSize = 0; type.html("只允许上传<font color='#FF0000'>" + allowType + "</font>格式的图片"); size.html("大小不能超过<font color='#FF0000'>" + allowSize + "M</font>"); $("#file").change(function() { var val = this.value var ext = val.substring(val.length - 3, val.length); if (allowType.indexOf(ext.toLowerCase()) < 0) { alert("只允许上传" + allowType + "格式的图片\n该文件格式为"+ext.toLowerCase()); type.html("只允许上传<font color='#FF0000'>" + allowType + "</font>格式的图片"); size.html("大小不能超过<font color='#FF0000'>" + allowSize + "M</font>"); $("#area").html("等待上传"); return; } //火狐浏览器 if (this.files) { var reader = new FileReader(); reader.onload = function(e) { $("#pic").attr("src", e.target.result); } var file = this.files[0]; reader.readAsDataURL(file); //火狐浏览器获取文件大小 uploadSize = file.size; } //IE和火狐浏览器获取文件大小，必须等图片加载完毕再获取 $("#pic").attr("src", this.value).load(function() { //判断是否为IE浏览器 if (document.all) { uploadSize = this.fileSize; } if (uploadSize > allowSize*1024*1024) { alert("图片大小不能超过" + allowSize + "M" + "\n该图片大小" + Math.round(uploadSize /(1024 * 1024)*1000)/1000 + "M"); type.html("只允许上传<font color='#FF0000'>" + allowType + "</font>格式的图片"); size.html("大小不能超过<font color='#FF0000'>" + allowSize + "M</font>"); $("#area").html("等待上传"); return; }else{ $("#type").html(ext.toLowerCase()); $("#size").html(Math.round(uploadSize /(1024 * 1024)*1000)/1000+"M"); $("#area").html("width：" + $("#pic").width() + "px<br />height：" + $("#pic").height() + "px"); } }); }); }); </script> <style type="text/css"> td { border: 1px #000 solid; padding: 5px; margin: 0; font-size: 14px; } </style> </head> <body> <input type="file" id="file" /> <table cellspacing="0"> <tr> <td>图片格式</td> <td id="type">等待上传</td> </tr> <tr> <td>图片大小</td> <td id="size">等待上传</td> </tr> <tr> <td>图片尺寸</td> <td id="area">等待上传</td> </tr> </table> <img id="pic" alt="图片预览区" src=""> </body> </html>

评论收藏

内容反馈