不知道大家有没有用过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;
下面附送完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>html5图片本地预览</title>
<script type="text/javascript">
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;
}
</script>
</head>
<body>
<img id="img" src="https://www.worldflying.cn/wp-content/themes/Worldflying/img/logo2.png"><br />
<input type="file" onchange="yulanimg(this)">
</body>
</html>