如何在拖放後以程式設定檔案輸入的值？

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

建立允許傳統檔案選擇和拖曳的檔案輸入控制項時-and-drop，確保檔案輸入欄位正確反映刪除的檔案非常重要。然而，由於安全性問題，過去透過 JavaScript 設定檔輸入值受到限制。

解決方案

值得慶幸的是，現代瀏覽器已經解決了這些安全漏洞，允許我們以程式調整input[type="file"] 的files 屬性。這使我們能夠模擬將文件拖放到文件輸入欄位中的效果。

實作細節

1. 處理拖放事件: 使用事件偵聽器來監控所需目標元素（例如，檔案輸入字段周圍的容器）。
2. 阻止預設操作：阻止預設拖放行為以自訂處理它。
3. 存取DataTransfer 或FileList： 對於刪除的文件，從傳遞給事件的e 物件中取得dataTransfer 物件或FileList handler.
4. 設定檔案輸入字段： 將目標檔案輸入欄位的files 屬性指派給步驟3 中所取得的dataTransfer.files 或 FileList。此操作將有效填入文件輸入包含已刪除文件的欄位。

範例程式碼

這是 JavaScript程式碼片段，示範如何在將檔案拖放到頁面上時設定檔案輸入值：

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

// Configure drag and drop event listeners
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中文網其他相關文章！