js实现纯前端的图片预览

纯前端图片预览的实现：无需服务器参与

图片上传功能中，图片预览是不可或缺的一部分。传统的做法是将文件路径上传至服务器，获取图片路径后再展示在img元素上，这无疑增加了服务器的工作量。最近，我偶然发现了一种纯前端实现图片预览的方法，无需服务器参与，非常便捷。

一、准备功夫：了解FileReader API

FileReader是HTML5的一个新特性，它可以读取Blob和File类型的数据。这个API提供了以下功能：

1. 构造方式：通过new FileReader()创建一个FileReader实例。

2. 属性：包括readyState（表示FileReader实例的当前状态）、result（读取到的文件内容）和error（表示在读取文件时发生的错误）。

3. 方法：包括abort()中止读取操作、readAsArrayBuffer()读取数据为ArrayBuffer类型、readAsText()读取数据为文本形式、readAsBinaryString()读取数据为原始二进制数据以及readAsDataURL()读取数据为Data URI Scheme形式。

4. 事件：包括onload、onerror、onloadstart、onloadend和onabort等事件，可以在读取数据的过程中进行相应处理。

5. 浏览器支持情况：大部分现代浏览器都支持FileReader API，包括FF3.6+、Chrome7+和IE10+等。

二、图片预览的实现：结合HTML5与CSS滤镜技术

除了FileReader API外，还需要结合HTML5与CSS滤镜技术来实现图片预览。其中，DXImageTransform.Microsoft.AlphaImageLoader滤镜是IE浏览器特有的技术，主要用于对图片进行透明处理（IE5.5~6并不支持透明的png）。通过设定滤镜的src属性，我们可以实现图片的实时预览。在JS中，我们可以通过修改img元素的style属性来应用这个滤镜。这样，无需上传文件至服务器，即可实现图片的实时预览。这种方法的优势在于降低了服务器的负担，提高了用户体验。

三、实现细节

在网页开发中，我们常常需要实现图片预览的功能。为了实现这一功能，我们可以利用FileReader的readAsDataURL方法获取Data URI Scheme。为了兼容旧版本的Internet Explorer（IE 5.5至9），我们可以使用滤镜DXImageTransform.Microsoft.AlphaImageLoader进行降级处理。

HTML代码片段如下：

```html

```

对应的JavaScript代码片段如下：

```javascript

var preview = function(el) {

var pv = document.getElementById("preview");

// 针对IE 5.5至9使用滤镜处理图片预览

if (pv.filters && typeof(pv.filters.item) === 'function') {

pv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = el.value;

} else {

// 对于其他浏览器和IE 10及以上版本使用FileReader进行图片预览

var fr = new FileReader();

fr.onload = function(evt) {

var pvImg = new Image();

pvImg.style.width = pv.offsetWidth + 'px';

pvImg.style.height = pv.offsetHeight + 'px';

pvImg.src = evt.target.result;

pvnerHTML = ''; // 清空原有内容

pv.appendChild(pvImg); // 添加新的图片元素到预览区域中

};

解决方案二： document.selection.createRangeCollection() 获取真实地址的技巧

在编程的世界里，我们经常需要处理文件选择的问题。假设我们有一个类型为 file 的元素，我们称之为 fileEl。这个元素被选中后，我们可以通过一种独特的方法获取其真实地址。具体操作步骤如下：使用 fileEl.select() 进行选择操作。接着，借助 document.selection.createRangeCollection() 函数获取选中的范围集合，并通过 [0].htmlText 获取文件的路径信息。这种方法的运用场景广泛，尤其在我们需要处理用户上传的文件时，显得尤为实用。

五、优化策略：使用 window.URL.createObjectURL 替代 FileReader

在处理文件时，我们有时会遇到通过 FileReader 的 readAsDataURL 方法获取的 Data URI Scheme。这种方法虽然可行，但生成的 base64 字符串可能非常长，尤其是在处理大文件时。当页面出现 reflow（回流）时，这可能会导致性能下降。为了解决这个问题，我们可以采取以下策略：

对于用于预览的 img 标签，我们可以使用绝对定位。这样，它就可以脱离正常的文档流，不受其他元素的影响。当页面出现 reflow 时，由于 img 标签与其他元素无关，因此不会影响性能。

我们可以采用 window.URL.createObjectURL(Blob blob) 生成数据链接的方法。这种方法允许我们创建一个指向 Blob 对象的临时 URL，可以有效地解决上述性能问题。这种生成的数据链接是独占内存的，因此在使用完毕后，我们需要调用 window.URL.revokeObjectURL(DOMString objUrl) 来释放内存。值得注意的是，当页面刷新时，相关的内存内容也会被自动释放。

以上就是我们今天要分享的全部内容。希望这些解决方案和策略能对大家的学习和实践有所帮助。让我们共同编程的奥秘，不断优化我们的代码，提升性能和用户体验。

请允许我以 cambrian.render('body') 结尾，希望这篇文章能够像一颗璀璨的星辰，照亮你的学习之路。