上傳插件套用的方法

php js fileupload

b3321597 2019-11-11 06:46:47 ‧ 859 瀏覽

請問大大們我想要把

改成可以用拖曳的插件
但不太懂
var file = files[0];
console.log(file.name);
這部分要修改成什麼
才能post時讀取到這部分的值

froce iT邦大師 1 級 ‧ 2019-11-11 11:25:16 檢舉

前端只要你能把檔案丟進去，拿的到file就好。不用管他是用拖拉或是點button。
比較有可能的是小魚說的，非同步的問題。

後端要接收只需要從request裡拿到file物件，剩下的瀏覽器會照標準送出，依你後端api取出來處理，用button怎麼做，後端都一樣。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

dragonH

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

就是你的 file

另外

input 本來就可以 drag and drop

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

簡單來說

拖拉完檔案

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

選我正解

codepen

postTest

回應 2
分享
檢舉

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

我執行RUN下去沒有用><
他那

這部分的
是我從插件模板的拷貝過來的
想把原本網頁中上傳圖片前要先按瀏覽選檔案在POST，改用拉圖片進來按POST就好這樣

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

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

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

既然你的 code 有問題

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

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

登入發表回應

小魚

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 意思一樣.