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

Posted handsomeBoys

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了选择图片后,页面回显图片相关的知识,希望对你有一定的参考价值。

<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‘/>");
})

以上是关于选择图片后,页面回显图片的主要内容,如果未能解决你的问题,请参考以下文章

百度WebUploader上传图片,图片回显编辑,查看

如何用input标签上传多个图片并回显

Ajax简单异步上传图片并回显

vue获取文件流(视频流音频流图片流)数据并将其回显展示

图片上传并回显Ajax异步篇

SpringBoot整合Markdown实现图片上传和图片再次回显(详细步骤)