獲取文件的輸入值使用javascript

Question

我有被提交表單後上傳的圖像使用簡單httppost到S3的JavaScript函數來模擬形式後，表單工作正常提交，但我想用ajax我敢找不到文件輸入，因爲我正在使用值字段。我試圖抓住它與文件[0]，但這是空的..

是否一個httppost提交整個文件，我需要閱讀文件的內容或只需使用ajax發佈url作爲值的文件字段？！這似乎並沒有工作。

我寧願阿賈克斯，因爲當我使用正常提交刷新整個頁面，並將用戶重定向。我想將文件發送到S3和攔截來自S3使用AJAX無刷新瀏覽器的XML響應。

看來該文件的內容不會被加載到執行提交操作，因此文件的內容不可用，直到提交表單，如何從JavaScript觸發此？我不使用jQuery所以我盤算如何讓文件內容後變量從JavaScript發佈。

Answer 1

您可以POSTFile或直接Blob對象通過fetch()呼叫設置在body任何一種情況下，或File對象追加到FormData對象和POSTmultipart/form-data到服務器。

document.querySelector("input[type=file]") 
.onchange = e => { 
    if (e.target.files.length) 
    fetch("/path/to/server", { 
     method:"POST", 
     body:e.target.files[0] 
    }) 
    .then(response => console.log(response.ok)) 
    .catch(err => console.error(err)) 
    } 
}