iT邦幫忙

1

上傳插件套用的方法

  • 分享至 

  • xImage

請問大大們我想要把

改成可以用拖曳的插件
但不太懂
var file = files[0];
console.log(file.name);
這部分要修改成什麼
才能post時讀取到這部分的值
https://ithelp.ithome.com.tw/upload/images/20191111/20109091w8b0tzvDqS.png

froce iT邦大師 1 級 ‧ 2019-11-11 11:25:16 檢舉
前端只要你能把檔案丟進去,拿的到file就好。不用管他是用拖拉或是點button。
比較有可能的是小魚說的,非同步的問題。

後端要接收只需要從request裡拿到file物件,剩下的瀏覽器會照標準送出,依你後端api取出來處理,用button怎麼做,後端都一樣。
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

1
dragonH
iT邦超人 5 級 ‧ 2019-11-11 08:55:56

就是你的 file

另外

input 本來就可以 drag and drop

所以不太清楚你的用意是什麼

簡單來說

拖拉完檔案

照你原本的去 post 應該就可以了

選我正解

codepen

postTest

b3321597 iT邦新手 5 級 ‧ 2019-11-11 09:08:49 檢舉

我執行RUN下去 沒有用><
他那
https://ithelp.ithome.com.tw/upload/images/20191111/20109091AvhhgzSmdb.png
這部分的
是我從插件模板的拷貝過來的
想把原本網頁中 上傳圖片前 要先按瀏覽 選檔案在POST,改用拉圖片進來按POST就好這樣

dragonH iT邦超人 5 級 ‧ 2019-11-11 09:18:13 檢舉

想把原本網頁中 上傳圖片前 要先按瀏覽 選檔案在POST,改用拉圖片進來按POST就好

拖拉檔案 <input> 本來就有支援了

既然你的 code 有問題

那你看一下你的 瀏覽器 f12 console

看看 console.log(file.name) 是顯示什麼結果

2
小魚
iT邦大師 1 級 ‧ 2019-11-11 09:31:29

前端檔案讀取要用非同步的方式,
這是預覽圖片的方式可以參考看看,

function readURL(input, id) {
    var reader = new FileReader();
    reader.onload = function (e) {
        //要等載入完成
        var image = new Image();
        image.onload = function () {
            //要等圖片載入完成
            var width = image.width;
            var height = image.height;

            $("#image" + id).attr("src", e.target.result);
        };
        image.src = e.target.result;
    }
    reader.readAsDataURL(input.files[0]);
}

這個 input 應該跟你的 files 意思一樣.

我要發表回答

立即登入回答