ドラッグ アンド ドロップ アップロードで FileList からファイルを削除する

HTML5 を使用してドラッグ アンド ドロップ アップロード アプリケーションを作成する場合、次のことができます。 FileList から特定のファイルを削除する必要があるシナリオが発生します。ただし、この問題を解決する前に、File API Working Draft に記載されているように、HTMLInputElement の FileList が読み取り専用であることを理解しておくことが重要です。

FileList 全体の削除

FileList から個々のファイルを削除することはできませんが、別の解決策があります。入力オブジェクトの value プロパティを空の文字列に設定することで、FileList 全体を消去できます:

document.getElementById('multifile').value = "";

注意事項

ただし、このアプローチを使用する場合は注意が必要です。 FileList 全体が削除されるため、以前に選択されていたすべてのファイルが削除されます。したがって、ユーザー エクスペリエンスを考慮し、FileList を削除する前に確認またはバックアップ メカニズムを提供することが重要です。

カスタム ファイル処理

より詳細に制御したい場合は、ファイルを処理し、FileList 全体の削除を回避するには、FileList と対話するコード内にカスタム チェックを実装できます。ただし、これにはさらに多くのコーディングと検証が必要になる場合があります。

追加リソース

さらに詳しいガイダンスについては、共通入力要素 API について詳しく説明している HTML 5 Working Draft を読むことを検討してください。さらに、記事「Web アプリケーションからのファイルの使用」では、Web アプリケーションでのファイルの操作に関する貴重な洞察が提供されます。