圖片上傳轉(zhuǎn)base64并預(yù)覽

圖片上傳轉(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;
       }
 }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,568評(píng)論 19 139
  • 5 分享內(nèi)容到你的網(wǎng)站 上一章中,你在網(wǎng)站中構(gòu)建了用戶注冊(cè)和認(rèn)證。你學(xué)會(huì)了如何為用戶創(chuàng)建自定義的個(gè)人資料模型,并添...
    lakerszhy閱讀 1,726評(píng)論 5 16
  • <a name='html'>HTML</a> Doctype作用?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別? (1)、<...
    clark124閱讀 3,836評(píng)論 1 19
  • 《理想國(guó)》以對(duì)話體的方式來(lái)展現(xiàn)現(xiàn)實(shí)生活中的正義以及構(gòu)建正義的模型,值得一提的是對(duì)話人物的出場(chǎng)順序。 第一卷,由格勞...
    鯨北晨閱讀 4,659評(píng)論 6 12
  • http://www.linuxidc.com/Linux/2015-08/120940.htm shuffle的...
    點(diǎn)點(diǎn)漁火閱讀 770評(píng)論 0 0

友情鏈接更多精彩內(nèi)容