html怎么把上传的图片可以预览,html5中图片上传前预览的方法_沃航科技

不知道大家有没有用过ueditor，一个百度推出的强大的富文本编辑器。这个编辑器一直是小沃的最爱，但是他有个让人不舒服的缺点，不知道大家有没有发现，那就是图片，ueditor是采用异步上传图片的方式。无论是什么图片，只要点击了上传，即使以后您放弃编辑这篇文章了，图片也会留在服务器中，这个问题，说心里话，面对ueditor这种设计，小沃目前也还没有找到解决方法。

但是小沃以前开发程序时，也遇到过类似的困境，如果小沃为了保证客户的网站上不至于有过多的垃圾文件，一般会采取的方法是利用html5最新的特性，让他可以实现本地预览图片，然后点击确认键后与文章主体一起上传的目的。

其实主要是使用html5新增的属性createObjectURL。下面来介绍一下具体实现的方法

一、获取createObjectURL这个对象。

由于createObjectURL这个对象在不同的浏览器中显示是不同的。因此我们需要通过一些手段来获取真正的createObjectURL，这里我们使用||。代码如下：

var createObjectURL = window.createObjectURL || window.URL.createObjectURL || window.webkitURL.createObjectURL;

二、获取文件对象。

首先，文件对象一定是通过input type=file获取的。因此这个方法也是通过它来获取控件的，首先通过getElementById或是事件中送的this等获取input的对象，然后通过file[0]来获取当前的文件对象。

三、最后通过createObjectURL将它转化为浏览器可以接受的安全的url，送给一个img让他显示即可。

var url = createObjectURL(obj.files[0]);

var img = document.getElementById("img");

img.src = url;

下面附送完整代码:html>

html5图片本地预览

function yulanimg(obj) {

var createObjectURL = window.createObjectURL || window.URL.createObjectURL || window.webkitURL.createObjectURL;

var url = createObjectURL(obj.files[0]);

var img = document.getElementById("img");

img.src = url;

}