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版本，可能需要额外的兼容性处理。