Js先回显图片再上传
平时开发时可能会遇到上传图片问题,但如果是上传图片,多数是先进行上传然后才能回显,今天给大家介绍一个简单的上传前先对图片进行回显的方式,仅用一小部分js代码即可实现
js代码部分
// 关于上传封面图片的回显
function getobj(obj) {
return document.getElementById(obj);
}
function upload(f){
var str = "";
for(var i=0;i<f.length;i++){
var reader = new FileReader();
reader.readAsDataURL(f[i]);
reader.onload = function(e){
str+='<img src="'+e.target.result+'" width="130px" height="130px"/>';
getobj("huixian").innerhtml = str;
}
}
}html部分
<div >
<label for="image">上传封面图片</label>
<div th:id="huixian"></div>建议130px*130px
<input type="file" id="image" onchange="upload(this.files)">
</div>此功能就实现了,然后上传的话把html代码放进表单中按正常的文件上传就行了
本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!