上传图片时的图片预览

在某个小页面中手写文件上传时,预览的代码做下记录

html代码

<ul id='preview'></ul>
<input type='file' id='upload'/>

js代码

//引入jquery
$('#upload').on('change',function(e){
    var src;
    var url = window.URL || window.webkitURL || window.mozURL;
    var files = e.target.files;
    var html = '';
    console.log(files);
    for(var i = 0; i < files.length; i++){
        var file = files[i];
        src = url ? url.createObjectURL(file) : e.target.result;

        html += '<li style="background:url('+src+'); background-size:cover;width:100px;height:100px;"></li>';
        $('#preview').append(html);
    }
})

发表评论

电子邮件地址不会被公开。 必填项已用*标注