如何透過拖放以程式設計方式設定檔案輸入值？

將檔案拖曳到頁面時如何設定檔案輸入值？

嘗試建立一個控件，使用者可以在其中手動選擇和刪除檔案來提交表單時，您遇到了一個問題：刪除檔案時檔案輸入仍為空。雖然以前出於安全考慮不允許以程式設計方式設定文件輸入值，但現代瀏覽器已經解決了這些漏洞。

解決方案：利用 DataTransfer 或 FileList

您現在可以設定檔案輸入值在現代瀏覽器上，透過利用 dataTransfer 或 FileList 物件。自 2017 年 12 月起，Firefox 和其他主要瀏覽器允許以程式設計方式進行檔案輸入操作。

方法：

1. 防止 Dragover 和 Dragleave 事件上的預設事件行為以啟用檔案輸入互動。

2. 掉落event:

   • 將 fileInput.files 設定為等於從 e.dataTransfer.files 取得的已刪除檔案。這會將拖放到頁面上的文件分配給文件輸入。
3. 刪除指示使用者正在拖曳的視覺提示。

範例：

let target = document.documentElement;
let body = document.body;
let fileInput = document.querySelector('input');

target.addEventListener('dragover', (e) => {
  e.preventDefault();
  body.classList.add('dragging');
});

target.addEventListener('dragleave', () => {
  body.classList.remove('dragging');
});

target.addEventListener('drop', (e) => {
  e.preventDefault();
  body.classList.remove('dragging');

  fileInput.files = e.dataTransfer.files;
});

注意：此方法適用於現代瀏覽器，並提供了一種透過拖放功能處理文件輸入的安全方法。

以上是如何透過拖放以程式設計方式設定檔案輸入值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！