选择图片后，页面回显图片

Posted 2020-10-13 handsomeBoys

<div class="form-group form-group-lg">
    <label class="col-xs-1 control-label">封面:</label>
    <div class="col-xs-11 clearfix">
        <div class="pull-left js-upload-img-wrapper">
            <img class="js-upload-img" src="/img/default.jpg"
                 onerror="this.src=‘/img/default.jpg‘" height="140" width="260" >
        </div>
        <span style="margin: 50px 10px; float: left;">（点击图片上传封面）</span>
        <input type="file" class="js-upload-img-trigger hidden" name="files" accept="image/jpeg, image/jpg, image/png, image/git">
    </div>
</div>

// 图片文件提交
$(‘.js-upload-img-wrapper‘).on(‘click‘, ‘.js-upload-img‘,function () {
    $(‘.js-upload-img-trigger‘).click();
});
$(‘.js-upload-img-trigger‘).change(function(event){
    var node = event.target;
    var imgURL = "";
    try{
        var file = null;
        if(node.files && node.files[0] ){
            file = node.files[0];
        }else if(node.files && node.files.item(0)) {
            file = node.files.item(0);
        }
        //Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径
        try{
            imgURL =  file.getAsDataURL();
        }catch(e){
            imgURL = window.URL.createObjectURL(file);
        }
    }catch(e){
        if (node.files && node.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                imgURL = e.target.result;
            };
            reader.readAsDataURL(node.files[0]);
        }
    }

    $(".js-upload-img-wrapper").html("<img class=‘js-upload-img‘ src=‘"+imgURL+ "‘ height=‘140‘ width=‘260‘/>");
})