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

1、实现图像预览的一些技巧。

过了一段时间，技能其实都差不多了。 大概有以下几种形式：

①订阅input[type=file]元素的onchange事件。

一旦选择的路径改变，图片就上传到服务器，然后返回图片在服务器端的地址，并在img元素中添加形参。

缺点：工作量大，有些上传的并不是用户最终需要上传的图片，但是这些方法会将上传过程中选择的所有图片保存到服务器上html5 图片预览，会导致资源浪费html5 图片预览，并且服务器也会清除这些临时预览图片。 需要一定的工作量。

② 使用HTML5的新功能FileReader。

该对象提供了很多相关的方法，其中最重要的是readAsDataURL技术。 点我了解更多。

缺点：通过FileReader的readAsDataURL方法获取的Data URIScheme会生成很长的base64字符串。 如果图片较大，则字符串会较长。 如果发生页面回流，性能就会下降。 并且浏览器支持不一致，支持的浏览器：FF3.6+、Chrome7+、IE10+。

③使用window.URL.createObjectURL替换FileReader，然后使用DXImageTransform.Microsoft.AlphaImageLoader过滤器兼容IE。

缺点：由于IE11的安全考虑，很难通过input[type=file]元素上的value、outerHTML、getAttribute方法获取用户选择的文件的真实地址，只能通过

D:rontEnd文件名。 因此，您需要使用 document.selection.createRangeCollection 方法来获取真实的地址。

二、我的插件制作

我选择了比较保守的方式，也就是第三种方式，使用window.URL.createObjectURL代替FileReader，然后使用DXImageTransform.Microsoft.AlphaImageLoader过滤器来兼容IE。

①第一步，HTML布局

你想说这么容易吗？

②第二步，插件js包。

1. 创建一个对象

我主要采用了组合继承的方法，封装了单图上传和多图上传两种方法。 因为无论是单图上传还是单图上传，都需要传入上传图片的输入按钮、img标签、img包裹的div以及最大单张照片的值，单位KB 。 所以创建上传图片对象时必须传入这四个参数。 该对象的创建方式如下：

2、定义匹配模式

因为是上传图片，除了在输入中添加accept="image/*"做初步限制外，还需要一个js正则，通过路径检查来判断是否是图片。 因此在原型前面定义模式可以通过两种方式使用：

3、定义方法

主要是判断环境是否高于IE11，写两类解决方案。 第一种是通过改变img的src直接预览图片，第二种是使用滤镜来实现低版本IE下的预览效果。

FF、Chrome、IE11及以上：（多图预览的代码贴在这里）

IE11下，使用滤镜可以达到效果：

至此，大功告成！

用法：

以上就是小编给大家介绍的JS上传图片预览插件制作（兼容IE6）的相关知识，希望对大家有所帮助。