拖放文件上傳

Question

我有一個HTML表單，用於上傳文件。 該文件將添加到隱藏文件輸入字段。 提交表單后，此文件和任何其他參數將發送到服務器。

該應用程序使用jQuery。

var data = ev.clipboardData.files;
$(ev.target).closest(".upload-box").find("input[type=file]").prop("files", data);

我已經閱讀了幾種方法，但是沒有一種方法使用input [type = file]字段。

如果不使用輸入字段，如何存儲刪除的文件？

我也嘗試實現這一點：

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop

我試圖添加類似

$(ev.target).closest(".upload-box").find("input[type=file]").prop("files", files);

哪個拋出

TypeError: Failed to set the 'files' property on 'HTMLInputElement': The provided value is not of type 'FileList'.

因此，看起來“文件” / FileList變為只讀？

請指出正確的方向。

Answer 1

您需要研究javascripts filereader api 。 輸入類型文件的內容始終為只讀，但是您可以讀取這些內容，並將其存儲在全局數組中（如果要發布多個文件）。

將它們放入數組后，您可以對它們執行所需的操作，例如，驗證文件類型，大小等。

Answer 2

我們不得不將剪貼板數據更改為dataTransfer

- var data = ev.clipboardData.files;
+ var data = ev.dataTransfer.files;

$(ev.target).closest(".upload-box").find("input[type=file]").prop("files", data);