JS上传图片预览插件制作（兼容到IE6）

一、图片预览的技术方法

在处理网页上传图片的功能时，预览图片是一个重要的环节。对于如何实现图片预览，存在多种技术路径。本文将为你揭示其中的一些主要方法。

一种常见的方法是订阅input元素（类型为file）的onchange事件。一旦用户选择了新的文件路径，就将图片上传至服务器，并获取图片在服务器端的地址，然后将其赋值给img元素以展示预览。这种方法可能导致资源浪费，因为每次选择的图片都会上传至服务器，即使这些图片可能只是上传过程中的临时选择。

第二种方法则利用HTML5的新特性FileReader。通过FileReader对象的readAsDataURL方法，可以实现图片的本地预览。这种方法存在一个缺点：生成的Data URI Scheme包含较长的base64字符串，当页面出现reflow时可能会影响性能。不同浏览器的支持情况也存在差异。

第三种方法使用window.URL.createObjectURL代替FileReader，并通过DXImageTransform.Microsoft.AlphaImageLoader滤镜实现IE浏览器的兼容。这种方法相对更为保守，并且在处理IE浏览器时更为灵活。需要注意的是，由于IE11的安全考虑，获取用户所选文件的真实地址变得困难，需要使用特定的方法如document.selection.createRangeCollection来获取。

二、我的JS图片上传预览插件制作经历

在尝试上述方法后，我选择了一种相对保守的方式来实现我的JS图片上传预览插件，主要使用第三种方法：使用window.URL.createObjectURL并辅以DXImageTransform.Microsoft.AlphaImageLoader滤镜以兼容IE浏览器。

我们设定了HTML的布局，包括一个用于展示预览图片的img标签和一个用于选择文件的input标签。这些元素通过简单的HTML代码即可完成布局。

接下来，我们进入插件的JS封装部分。我采用了组合继承的方式，封装了两个核心方法：单张图片上传和多张图片上传。这两个方法都需要传入一些关键参数，如文件的对象、预览图片的img标签、包裹img的div以及最大单张照片的大小。创建该对象的过程相对简单明了。

除此之外，为了确保上传的图片是有效的，我们还需要定义一个匹配模式来检测图片的路径。通过正则表达式的使用，我们可以确保只有符合特定格式（如.jpg、.png、.jpeg）的文件才能被接受。

通过结合HTML和JavaScript的使用，我们可以实现一个功能强大的JS图片上传预览插件，不仅能够在现代浏览器中流畅运行，还能兼容到古老的IE6浏览器。这样的插件对于开发者来说具有很高的实用价值。随着网络技术的飞速发展，图片的上传和预览已经成为我们日常生活中的常见功能。无论是使用FF、Chrome还是IE11等浏览器，我们都期望能够流畅、便捷地处理图片。接下来，让我为大家详细介绍一段图片预览的代码，让我们一起看看如何完成这一过程。

当我们在网页上选择上传图片时，我们需要检查是否已经选择了文件，并获取DOM中已经存在的图片数量。代码片段如下：

```javascript

if (this.fileObj.files) {

var imgs = this.picWrap.querySelectorAll('img'); // 获取已存在的图片元素

var num = imgs.length; // 图片数量

var html = this.picWrapnerHTML; // 获取当前图片包裹的HTML内容

// 判断是否超过最大上传限度

if (num < maxPics) {

// 其他代码处理逻辑...

}

}

```

对于IE11浏览器，我们还可以利用滤镜来达到某些视觉效果。由于IE11及以下版本可能不支持一些现代CSS和JavaScript方法，因此我们需要通过其他方式实现图片预览功能。代码片段如下：

```javascript

var nums = this.picWrap.childNodes.length; // 获取图片包裹的子节点数量来判断已有图片数量

if (nums < maxPics + 2) { // 考虑默认图片和节点数量误差问题

// 获取用户选择的图片文件信息并进行处理

this.fileObj.select(); // 选择文件操作通常用于老版IE浏览器中的文件选择处理逻辑

if (document.selection) { // 判断是否支持document.selection对象来获取选中的文本或文件内容

// 其他代码处理逻辑... 包括判断图片大小、设置图片预览等。对于IE浏览器特有的处理方式包括使用滤镜效果展示图片等。

} else { // 如果不支持document.selection对象，则可能需要使用其他方法来获取用户上传的文件并进行处理。在支持更现代标准的浏览器中通常可以使用FileReader等技术进行文件读取和预览。 }

} else { // 如果已经超过了最大上传限制，则给出提示信息 }

```

这段代码中包含了多种浏览器的兼容处理方式，确保了在不同浏览器环境下都能实现图片的上传和预览功能。通过复杂的逻辑判断和对各种浏览器特性的运用，确保了用户可以顺畅地操作上传过程并获取良好的用户体验。实际应用中可能还需要更多的细节处理和错误提示来完善功能。JS上传图片预览插件的魔力（兼容至IE6）

在数字世界中，图片上传和预览已经成为我们日常生活的一部分。无论是分享生活点滴，还是进行商业推广，都需要高效的图片处理工具。今天，长沙网络推广将带你深入了解一个强大的JS上传图片预览插件的制作过程，其兼容性甚至延伸至古老的IE6浏览器。

想象一下，你有一个网页应用，用户需要上传图片。如何使这个过程更加流畅、便捷，同时还能保证图片的预览效果？这就需要我们的JS上传图片预览插件来助力了。

你需要引入相关的JS文件：

```html

```

接下来，通过简单的HTML元素获取操作，我们可以为上传和预览功能打下基础：

```html

var fileObj = document.getElementById('uploadBtn'); //上传按钮

var preview = document.getElementById('preview'); //预览图片的img标签

var picWrap = document.getElementById('pic'); //包裹img标签的div

```

当上传按钮发生变动时（即用户选择了新的图片文件），执行以下操作：

```javascript

fileObj.onchange = function() {

// 创建上传图片对象，传入相关参数

var obj = new SetPreviewPic(fileObj, preview, picWrap, 100);

// 调用单张图片上传方法，传入期望的图片宽度和高度

obj.uploadSinglePic(200, 250);

}

```

这样，用户选择的图片就会被预览出来，而且你可以通过调整`uploadSinglePic`方法的参数来控制预览图片的尺寸。如果你需要支持多张图片上传，可以调用`uploadPics`方法并设置最大上传张数。

这个插件不仅功能强大，而且兼容性出色，即使在IE6这样的老版本浏览器中也能良好运行。如果你有任何疑问或需要进一步的帮助，欢迎留言，长沙网络推广会及时回复你的！让我们一起这个JS上传图片预览插件的无限可能。