圖片上傳轉(zhuǎn)base,賦值給img標(biāo)簽的src屬性顯示在頁(yè)面,將轉(zhuǎn)換后的結(jié)果提交給后端,返回url。
<!-- mumultiple屬性 規(guī)定可接受多個(gè)值 -->
<input type="file" name="file" id="upload_file" multiple="multiple" />
<input type="hidden" name="upload_base" id="upload_base" />
<span>圖片預(yù)覽</span>
<img id="upload_show" />
document.getElementById('upload_file').onchange = function(){
var fileObj = this.files;
var reader = new FileReader();
// 轉(zhuǎn)base64
reader.readAsDataURL(fileObj[0]);
reader.onload = function(){
// 將轉(zhuǎn)換后的編碼存入src實(shí)現(xiàn)預(yù)覽
document.getElementById("upload_show").setAttribute("src", this.result);
// 將轉(zhuǎn)換后的結(jié)果作為 type為hidden 的 input 的值,提交給后臺(tái)
document.getElementById("upload_base").value = this.result;
}
}