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

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

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

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

慕運維8079593 2018-12-19 17:13:24
看到一些平臺用戶上傳圖片，直接就點擊一次按鈕（或圖片icon），就彈出選擇框，用戶確認以后，圖片就直接上傳并在前臺返回圖片信息，但是通常步驟是：點擊按鈕1選擇圖片》彈出選擇框》用戶確認》點擊按鈕2確認上傳，怎樣實現(xià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,點擊img彈出選擇框，但是第一次上傳是失敗的，感覺還是需要綁定另外一個按鈕才能實現(xiàn)上傳。該怎樣實現(xiàn)？
查看完整描述

1 回答

?
慕斯709654

TA貢獻1840條經(jīng)驗 獲得超5個贊

先說下思路：


1.把input隱藏，給img標簽的點擊回調(diào)方法中，手動調(diào) input 的 click 方法，這時候會彈出圖片選擇框，開始選擇。

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

3.用 javascript 創(chuàng)建 formData對象并添加選擇的文件到formData對象中，手動調(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請求，上傳文件

        $.ajax('/xxxx', fd)

        .....

    }

});


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

添加回答

舉報

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

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