第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

關(guān)于圖片上傳問題？

關(guān)于圖片上傳問題？

慕運(yùn)維8079593 2018-12-19 17:13:24
看到一些平臺(tái)用戶上傳圖片，直接就點(diǎn)擊一次按鈕（或圖片icon），就彈出選擇框，用戶確認(rèn)以后，圖片就直接上傳并在前臺(tái)返回圖片信息，但是通常步驟是：點(diǎn)擊按鈕1選擇圖片》彈出選擇框》用戶確認(rèn)》點(diǎn)擊按鈕2確認(rèn)上傳，怎樣實(shí)現(xiàn)用戶選完圖片確認(rèn)后就直接上傳，無需再點(diǎn)擊其他按鈕？我試著寫一下：<input type="file" name='file' id='file' class='file'><label for='file'><img src="/images/%E5%9B%BE%E7%89%87.png" alt=""></label>把input隱藏,用ajax上傳，img綁定click,點(diǎn)擊img彈出選擇框，但是第一次上傳是失敗的，感覺還是需要綁定另外一個(gè)按鈕才能實(shí)現(xiàn)上傳。該怎樣實(shí)現(xiàn)？
查看完整描述

1 回答

?
慕斯709654

TA貢獻(xiàn)1840條經(jīng)驗(yàn) 獲得超5個(gè)贊

先說下思路：


1.把input隱藏，給img標(biāo)簽的點(diǎn)擊回調(diào)方法中，手動(dòng)調(diào) input 的 click 方法，這時(shí)候會(huì)彈出圖片選擇框，開始選擇。

2.給 input 的 change 事件回調(diào)函數(shù)里，獲取選擇的文件。

3.用 javascript 創(chuàng)建 formData對(duì)象并添加選擇的文件到formData對(duì)象中，手動(dòng)調(diào)用 ajax 方法上傳文件。


示例代碼（以jQuery為例，可換成其他方式）：


// html

<input type="file" name='file' id='file' class='file'>

<label for='file'>

    <img src="/images/%E5%9B%BE%E7%89%87.png" alt="">

</label>

// js


$('#file').on('change', function(e){

    var file = e.currentTarget.files;

    if (file && file[0]) {

        var fd = new FormData();

        fd.append('file', file);

        

        // 調(diào)用ajax請(qǐng)求，上傳文件

        $.ajax('/xxxx', fd)

        .....

    }

});


查看完整回答
反對(duì) 回復(fù) 2019-01-13
  • 1 回答
  • 0 關(guān)注
  • 422 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)