iT邦幫忙

2

自動保存草稿,但如何將圖片(input file)如何丟到後端?不透過形式的方式

我利用keyup事件使欄位可以自動保存到數據庫

html

<input type="file" id="file" name="cover" accept="image/jpeg, image/png, image/jpg">
...
...

ajax

$('body').on('keyup', '#content, #title', function(e){

var content = $('.note-editable').html();
var title = $('#title').val();
var file = $('#file').val();

$.ajax({
      type: "POST",
      url: "auto-save",
      data: {
        "content": content,
        "title": title,
       // "file": file
      },
    // dataType: "text",
    //  enctype: "multipart/form-data",
// cache: false,
// contentType: false,
// processData: false,
      success: function(data){

但有個問題
裡面有個 input file
我要如何使他能將圖片檔丟到後端去? (當 input on change的時候)
但這不是form 形式,單純取值丟後端
我發現加上了這個完全行不通呢

enctype: "multipart/form-data",
cache: false,
contentType: false,
processData: false,

如果不透過表單的方式,怎麼抓到input file的圖片文件位置丟到後端,好讓我可以move_uploaded_file?

1 個回答

1
froce
iT邦高手 1 級 ‧ 2018-11-07 12:54:32
最佳解答

1.你可以透過base64去傳,這樣就是純字串。
2.如果你只是不想讓使用者按submit,你可以用new FormData去傳,這樣背後還是透過form,只是使用者看不到。
https://developer.mozilla.org/zh-TW/docs/Web/API/FormData/Using_FormData_Objects

看更多先前的回應...收起先前的回應...
asys0512 iT邦研究生 5 級 ‧ 2018-11-07 13:20:57 檢舉

但其實我已經有另一個 form 是讓他「發佈」用的,這樣好像會有衝突
base64 真的不是很好用,字串太大了

froce iT邦高手 1 級 ‧ 2018-11-07 13:40:03 檢舉

不會,就算在同一頁面有多個form也不會衝突,因為一次只會有一個form送出,只要你多設一個欄位去檢查你form是哪個就行。

base64也可以透過gzip壓縮。

fillano iT邦超人 1 級 ‧ 2018-11-07 13:56:22 檢舉

用File API,可以直接從input取得File物件,XMLHttpRequest2可以直接發送Blob,File物件也是Blob,可以直接發送。建議你可以google一下,網路上資訊很多的。

froce iT邦高手 1 級 ‧ 2018-11-07 15:07:12 檢舉

從 fillano 大神這邊學到一招。

我要發表回答

立即登入回答