js实现上传图片预览

发表于   |   分类于   |  

哇，我是真的觉得js流弊的，以前学真的不知道它内置了那么多的对象，就拿上次写的FormData来说吧，你没有去真实的实现ajax上传文件的功能，那真的你肯定就不知道FormData,就像我在segmentFault上看到别人那么肯定的回答： “ajax不能实现文件上传！” 那他肯定不知道js的内置类对象FormData了

FileReader

我真的不知道js里还有这个对象，即使现在我对他也不是很熟，我只能通过他来实现js的图片上传预览。 对了，昨天我还用到了Option对象，我也从来不知道这个，option就留着下次写吧。

言归正传，那么如何利用FileReader实现图片于预览呢？

<input type="file" name="simg" id="simg">
<div id="img-preview"></div>


var simg = document.getElementById("simg");
simg.onchange = function(){
    var fr = new FileReader();
    fr.onload = function(e){
        var str = "";
        str = "<img src='"+e.target.result+"' >";
        document.getElementById("img-preview").innerHTML = str;
    }
    fr.readAsDataURL(simg.files[0]);
}

新建FileReader对象，在fr对象中的onload事件上注册function，让fr来读取input[type=”file”]的file数据，这里会是一串非常长的字符串，我们把它放在img标签的src中，那么它就会生成一张图片了。

当然有的时候我们的需要设置mutilple属性，它允许我们上次多个文件，那么我们也可以修改这段代码为：

<input type="file" name="file[]" id="file" multiple>

document.getElementById("file").onchange = function() {
            var str = "";
            var files = document.getElementById("file").files;
            var count = files.length;
            for (var i = 0; i < count; i++) {
                var fr = new FileReader();
                fr.onload = function(e) {
                    str = "<div class=\"img-box\"><img src='" + e.target.result + "'></div>";
                    document.getElementById("res").innerHTML += str;
                }
                fr.readAsDataURL(files[i]);
            }
        }