HTML5 ドラッグ アンド ドロップによるファイルの一括アップロードのサンプル コード

このコンポーネントは Vue.js に基づいて実装されており、完全なデモのアドレスは https://github.com/Msxiaoma/upload-folder にあります (Chrome でのみサポートされています)。

1. 複数のフォルダーを同時にドラッグ アンド ドロップする
2. 指定したフォルダーを削除する
3. 現在のフォルダーのアップロード進行状況バーを表示します
4. 5Mを超えるフォルダーを部分的にアップロードする

効果は次のとおりです。

1. ドラッグアンドドロップして各フォルダー下のファイルパスを読み取ります
2. 現在アップロードされているフォルダーの進行状況バーを表示する方法
3. ファイルのアップロード時にドメイン間で Cookie を転送する
4. フォルダーの断片化

ドラッグ アンド ドロップ操作を実行する場合、DataTransfer オブジェクトは、ドラッグ アンド ドロップ アクションを通じてブラウザにドラッグされたデータを保存するために使用されます。 1 つ以上のデータ、1 つ以上のデータ型を保存できます

// フォルダーをドラッグします DropFolders (e) { e.stopPropagation() e.preventDefault() var items = e.dataTransfer.items for (var i = 0; i < items.length; i++) { var item = items[ i] .webkitGetAsEntry() if (item) { this.checkFolders(item) } }}// フォルダーかどうかを判断します checkFolders (item) { if (item.isDirectory) { this.traverseFileTree(item) } else { this.$alert('フォルダーのアップロードのみをサポートします', 'プロンプト', {confirmButtonText: 'OK' }) }}traverseFileTree (item, path,parentDir ) { path = path || '' if (item.isFile) { item.file((file) => { let obj = { ファイル: ファイル、パス: パス + file.name, attr: item.attr } this.filesList.push(obj) }) } else if (item.isDirectory) { var dirReader = item.createReader() dirReader.readEntries((entries) => { for (let i = 0; i < エントリの長さ; i++) { エントリ[i].attr = item.attr this.traverseFileTree(エントリ[i],パス + item.name + '/', temp) } }, function (e) { console.log(e) }) }}

断片化のないファイル: フォルダー内のファイルの合計数に基づいて、ファイルが正常にアップロードされたときにフォルダー内の各ファイルの割合を計算し、フォルダー プロセスを変更します。

断片化されたファイル: ファイル内の各ファイルの割合を計算した後、各ファイルが正常にアップロードされた後、フォルダーのプロセスを変更します。

サーバーが応答ヘッダーを設定するとき

Access-Control-Allow-Origin: 要求された Web ページと一致する明確なドメイン名を指定する必要があり、* は使用できません。アクセス制御許可資格情報: true

リクエストヘッダーを設定します。

withCredentials:true

補充:

substr(start [, length ]) は、指定された位置から始まる指定された長さの部分文字列を返します。

start: 必須オプション。目的の部分文字列の開始位置。文字列の最初の文字のインデックスは 0 です。

長さ: オプション。返される部分文字列に含める必要がある文字数。

substring は、String オブジェクト内の指定された位置にある部分文字列を、先頭から末尾まで (末尾を除く) 含む文字列を返します。

start: 部分文字列の開始位置を示し、インデックスは 0 から始まります。

end: 部分文字列の終了位置を示します。インデックスは 0 から始まります。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。