图片上传转base,赋值给img标签的src属性显示在页面,将转换后的结果提交给后端,返回url。
<!-- mumultiple属性 规定可接受多个值 -->
<input type="file" name="file" id="upload_file" multiple="multiple" />
<input type="hidden" name="upload_base" id="upload_base" />
<span>图片预览</span>
<img id="upload_show" />
document.getElementById('upload_file').onchange = function(){
var fileObj = this.files;
var reader = new FileReader();
// 转base64
reader.readAsDataURL(fileObj[0]);
reader.onload = function(){
// 将转换后的编码存入src实现预览
document.getElementById("upload_show").setAttribute("src", this.result);
// 将转换后的结果作为 type为hidden 的 input 的值,提交给后台
document.getElementById("upload_base").value = this.result;
}
}