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;

下面附送完整代码:

<!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>