JavaScript实现实时预览type=file上传的图片(IE/Chrome兼容)
在HTML5中,处理用户上传的文件类型为"file"时,尤其是在处理图片文件时,实时预览功能是非常实用的。本文主要介绍如何在JavaScript中实现在IE(Internet Explorer)和Chrome浏览器上实现`type=file`选择的图片的实时预览。由于这两种浏览器在处理HTML5 File API的方式上有差异,因此需要编写特定的代码来适应它们。 首先,我们需要了解HTML的部分结构,其中包含一个`<input type="file">`元素,用户可以通过这个元素选择本地文件。这通常在表单中使用,如: ```html <input type="file" id="fileInput" accept="image/*" onchange="previewFile(this)"> ``` 这里设置了`accept`属性来限制只能选择图片文件。 然后,引入`PicSwitch.js`脚本,这是一个自定义的JavaScript库,它处理图片预览逻辑。这个库的核心在于利用`FileReader`对象读取用户选择的文件,然后根据浏览器的不同,采用不同的技术进行预览。在IE浏览器中,由于其不支持HTML5的` FileReader.readAsDataURL`方法,我们使用滤镜`filter: progid:DXImageTransform.Microsoft.AlphaImageLoader`来创建一个假的`<img>`元素来显示图片。而对于Firefox及现代浏览器,我们可以直接读取URL并设置`src`属性显示预览。 在CSS中,我们定义了几个容器类,如`#preview_wrapper`用于设置预览区域的样式,`#preview_fake`和`#preview_size_fake`分别用于IE下显示预览图片和获取图片原始尺寸(后者是隐藏的)。在FF下,预览区域`#preview`用于实际显示图片。 具体到JavaScript代码,`previewFile`函数可能如下所示: ```javascript function previewFile(inputElement) { var file = inputElement.files[0]; if (!window.FileReader) return; // 判断浏览器 if (typeof FileReader === 'undefined' || !window.FileReader.prototype.readAsDataURL) { // IE下处理 var reader = new FileReader(); reader.onload = function(e) { var imgFake = document.getElementById('preview_fake'); imgFake.src = e.target.result; }; reader.onerror = function() { console.error('Error reading file'); }; reader.readAsDataURL(file); } else { // FF及现代浏览器处理 var reader = new FileReader(); reader.onload = function(e) { var imgPreview = document.getElementById('preview'); imgPreview.src = e.target.result; }; reader.readAsDataURL(file); } } ``` 这段代码首先检查浏览器是否支持`FileReader`,然后根据支持情况执行不同操作:在IE中,创建`onload`事件处理程序来更新`#preview_fake`的`src`,而在现代浏览器中则直接设置`#preview`的`src`。 通过这种混合使用浏览器特性和JavaScript技巧,我们可以实现在IE和Chrome上对`type=file`选择的图片进行实时预览,提升用户体验。需要注意的是,这种方法并非所有老旧版本的IE都适用,对于完全不支持`FileReader`的IE版本,可能需要额外的兼容性处理。
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/PicSwitch.js"></script>
<style type="text/css">
#preview_wrapper{
display:inline-block;
width:300px;
height:300px;
background-color:#CCC;
}
#preview_fake{ /* 该对象用户在IE下显示预览图片 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
#preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸,无其它用途 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
visibility:hidden;
}
#preview{ /* 该对象用户在FF下显示预览图片 */
width:300px;
height:300px;
}
#preview_wrapper{
display:inline-block;
width:300px;
height:300px;
background-color:#CCC;
}
#preview_fake{ /* 该对象用户在IE下显示预览图片 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
下载后可阅读完整内容,剩余4页未读,立即下载
- 粉丝: 1
- 资源: 3
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C++标准程序库:权威指南
- Java解惑:奇数判断误区与改进方法
- C++编程必读:20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程:从入门到精通
- Spring3.0权威指南:JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略:从环境配置到索引创建
- 内存虚拟硬盘技术:提升电脑速度的秘密武器
- Java操作数据库:保存与显示图片到数据库及页面
- ISO14001:2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发:触发器与控制器重定向技术详解
- FPGA开发实战指南:创新设计与进阶技巧
- ShopExV4.8二次开发入门:解决升级问题与功能扩展