JavaScrip 原生多文件上传及预览 兼容多浏览器

JavaScrip 原生多文件上传及预览 兼容多浏览器

html代码块

<div class="container">
    <label>请选择一个图像文件：</label>
    <input type="file" id="file_input" multiple/>
    <div class="img-box"></div>
</div>

JavaScript代码块,需要引入jQuery

$("[type='file']").change(function() {
    $.each(this.files,function(key,value){
        $('.img-box').append('<img height="200px" src="'+getObjectURL(value)+'"/>');
        //console.log(getObjectURL(value));
    });
});

//获取文件地址，显示预览用
var getObjectURL = function(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
};