JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】

本篇文章主要介绍了使用JavaScript实现图片大小获取和预览的方法，并且确保了在不同的浏览器环境下，包括Internet Explorer和其它现代浏览器，都能够正常工作。以下是文章中涉及的主要知识点： 1. 跨浏览器图片预览技术：由于不同的浏览器对文件API的支持不同，因此需要根据浏览器类型采取不同的技术手段。对于IE浏览器，主要通过`document.selection.createRange().text`来获取选中的图片文件路径，并应用滤镜效果。对于非IE浏览器（如火狐、Chrome等），利用`window.URL.createObjectURL`方法创建了一个临时的URL对象，并将其赋值给`<img>`标签的`src`属性以显示图片预览。 2. 图片大小获取：在图片上传功能中，需要获取用户选择的图片的大小。通过JavaScript中的`fileSize`属性可以获取到图片的文件大小，不过在IE8以下的版本中，由于`fileSize`属性不存在，需要通过`files[0].size`来替代。`fileSize`属性返回的单位是字节，可以通过除以1024并四舍五入取整后得到KB为单位的大小。 3. 浏览器用户代理检测：通过`window.navigator.userAgent`可以获取浏览器的用户代理字符串，这在进行浏览器特定功能的判断和处理时非常有用，例如在此文章中检测了浏览器类型，以便采取相应的图片预览方法。 4. 事件监听：通过监听`<input>`元素的`onchange`事件，可以确保当用户选择了文件后，能够即时执行相关的处理函数，如`imageChange`函数。在该函数中，使用`previewImage`函数对图片进行预览，并获取文件大小与路径等信息，然后将结果显示在页面的指定位置。 5. 对于不支持`window.URL.createObjectURL`方法的老旧浏览器（如IE8及以下版本），文章中提到使用滤镜技术作为替代方案。此技术通过滤镜接口实现图片的加载和显示，尽管滤镜方法是专属于IE的技术，但在此场景下能够提供必要的功能支持。 6. 文档中提到的四个JavaScript相关的专题《JavaScript图片操作技巧大全》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》和《JavaScript数据结构与算法》，这暗示了JavaScript在处理图片、绘图、调试和数据结构方面具有广泛的应用和丰富的技巧，值得进一步研究和学习。 文章通过实例详细说明了如何在兼容IE和其它浏览器的情况下，实现图片的上传、预览和大小获取，并且通过注释和示例代码提供了实践中的具体操作方法。对于前端开发者来说，这些内容是实现类似功能时非常实用的参考资源。