我正在嘗試在提交之前在我的 html5 表單中的多檔案輸入元素中過濾一些用戶選擇的檔案。在提交表單并上傳到服務器之前，您似乎可以從表單上的任何檔案輸入中洗掉所有用戶選擇的檔案，或者從檔案輸入中洗掉任何用戶選擇的檔案。如果能夠在上傳之前洗掉任何有問題的檔案，那就太好了。否則必須允許上傳檔案并讓 php 在提交后處理上傳的檔案。感謝您的任何想法。
uj5u.com熱心網友回復：
看起來我的懷疑得到了證實，將檔案添加到檔案輸入的唯一方法是將其設定為等于 dataTransfer 物件，即：
fileInput.files=evt.dataTransfer.files;
evt.dataTransfer.files 代表用戶選擇/洗掉的檔案，不能通過頁面上的 js 代碼更改。
我無法使用 formData.append() 將檔案添加到檔案輸入中，以便將多個附加迭代中的單個檔案附加到檔案輸入中。
下面的這個解決方案是有效的。該程序是在頁面加載時實體化您自己的 dataTransfer 物件。然后在每次拖動或瀏覽時從 evt.dataTransfer.files 獲取用戶上傳的檔案并遍歷它們。當您找到符合條件的檔案時，將它們添加到您自己的自定義 dataTransfer 物件中。一旦您自己的 dataTransfer 物件全部設定為您希望在每次用戶洗掉后添加的檔案，更新 fileInput.files= 您自己的 dataTransfer 物件。
負載：
var dT=new dataTransfer(); var fileInput=document.forms[0].elements['files[]'];
//現在在每次放置時，您將獲得用戶選擇的檔案：
evt.dataTransfer.files所以您總是從它開始。
function dropHandler(evt) {
//prevent default action
evt.preventDefault();
evt.stopPropagation();
//for each file in the user selection, validate them as you wish
//and only add the ones you want to the dataTransfer object you already created.
for (const file of evt.dataTransfer.files) {
//if this validate that etc
//if file is good to add
dT.items.add(file);
}
//at the end of each drop
//once you have added only the files you want to your own dT object
//update your form's file input's files to the latest version of your dT object's files
fileInput.files=dT.files;
}//end drop handler function`
現在，您的表單檔案輸入僅填充了您想要的用戶選擇的檔案，已經清除了其余檔案并準備好提交表單。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/469232.html
標籤：javascript 形式 文件 输入 上传