バックにフロント：フォルダのアップロード
Web開発は確かに遭遇されるファイルアップロードの問題であり、アップロードフォルダは、より難治性です。より多くの注意の欠如のためのフロントエンド、バックエンドに集中して、バックエンドのフレームワーク文書のアップロード記事に話すとフォルダを伴わないと、アップロードするフォルダに関するオンライン情報。今日はこのレコードでは、この問題を研究しています。
私は二つの問題についてお話しましょう：
すべてのバックエンドフレームワークは、アップロードフォルダをサポートしていますか？
すべてのブラウザがアップロードフォルダをサポートしていますか？
最初の質問：YES、2番目の質問：NO
限り、フォームのサポートのためのバックエンドフレームワークが完了すると、その後、アップロードフォルダがサポートしている必要があります。ブラウザについては、今のように、Chromeのみサポート。
他のブラウザがサポートしている場合には、このような優遇大きなファイルアップロードコントロールなどのプラグインの助けを必要とします：www.webuploader.net
WebUploaderの説明の機能：
大容量ファイルのアップロードを再開
大容量ファイルのアップロード（100G +）と再開のサポートは、あなたがブラウザを閉じることができ、まだシステムを再起動してアップロードし続けます。
オープンソース
ASP.NET、JSP、PHPの例と設定し、サンプルコードをJSPのMySQLやOracle、SQL Serverデータベースを提供し、ソースコードを提供します。
フラグメント、同時
同時結合断片、複数に大きなファイル、同時アップロードは、非常に大きなファイルのアップロードの速度を向上させます。
送信エラーの原因ときにネットワークの問題は、だけではなく、ファイル全体よりも、間違ったスライスを再送信する必要があります。リアルタイム追跡のアップロードの進行状況をより細分化伝送に加えて。
プレビュー、圧縮
人気の画像フォーマットはJPG、JPEG、GIF、BMP、PNGプレビューおよび圧縮、ネットワークデータ伝送を保存するためのサポート。
オリエンテーションのさまざまなJPEGメタ情報分析は、すべての元のメタデータ保持のアップロード画像圧縮後の同じ時刻に、適切な治療を行いました。
マルチチャンネルの追加ファイル
支持体は、フィルタタイプ、ドラッグ＆ドロップ（ファイル＆フォルダ）、画像ペースト機能、マルチ[ファイル]を選択します。ローカルファイル指定したパスボタンをクリックしてファイルを選択する必要はありませんをアップロードします。
とき（例えばQQます（Ctrl + ALT + A）のように画面キャプチャツール、コピーにページ上の画像をクリックの上で右クリック）クリップボードにデータがあるとき、関数は主に映像に反映されて貼り付け、Ctrlキー+ Vは、このイメージファイルに追加することができます。
HTML5＆FLASH
主要なブラウザとブラウザのバージョンが低いとの互換性、一貫性のあるインターフェースが2ランタイムサポートを実現するために、ユーザーは気にしないものを内部で使用するためのカーネル。そして、IE6、IE8のブラウザをサポートしています。
同時に、フラッシュの一部は、ビジネスニーズを拡張し、カスタマイズするためにフラッシュユーザーが気にしないように簡単に、任意の仕事関連のUIを行いません。
IO操作は、メモリマップモードに基づいて行われ、オペレーティング・システムの性能を十分に発揮します。
MD5の秒パス
大きなファイルサイズ、比較的長い時間の量は、アップロードをサポートする前に、ファイルのMD5値を検証行うと、あなたは一貫性をスキップすることができます。
サービスエンドとフロントエンドは、アルゴリズムの変更を統一した場合は、20msの周りを消費し、大幅に性能検証を向上させることができ、セクションはMD5取ります。
スケーラブルは、分割することができます
取り外し可能なメカニズムの使用は、様々な機能の独立性がウィジェットになった、あなたは自由に混在させることができます。
AMDは、簡単に高度な選手を拡大するために、コード指定団体、明瞭さを使用しています。
アップロードフォルダ
10万+レベルフォルダのアップロード再開をサポートしています。
階層ディレクトリ構造の保存をサポートし、データベース・レベルの情報をアップロードした後、データベースに格納することができます。
MySQLのは、Oracle、SQL Serverデータベースのサポートを提供します。
履歴書フォルダのサポート、まだ、ブラウザを再起動リフレッシュアップロードし続けることができます。
クロスドメインのサポートをアップロードします。
PCのエンドフルプラットフォームのサポート
Windowsの、MacOSの、Linuxのサポート。ローカライズのためのオペレーティングシステムのサポート、政府の情報セキュリティプログラムのサポート。
システムの低バージョンをサポートするWindows：WindowsのXP。
どのブラウザが含まれます：IE6、IE7、IE8（のx86、x64）の、IE9（のx86、x64）の、IE10（のx86、x64）の、IE11（のx86、x64）の、360 のセキュリティブラウザ、360高速ブラウザ、QQのブラウザを、Sogouのブラウザ、Maxthonは（旅行）ブラウザ1.X、Maxthonは（Maxthonの）ブラウザ2.xでは、Firefoxの、クロム、オペラ23+
アップロードするフォルダを選択
フォルダのアップロードが完了しています
アップロード後にサーバ内のフォルダ階層
さて、私たちのすべてのユーザーがそのフォルダのファイルをアップロードするクロムが、どのように成功するために行うために使用していたと仮定？ここでは、この背の高いに物事をドロップしない、それは最も伝統的な<入力>です。これは、フォームで行われ、提出する方法でアヤックス、表情を提出することができます。
<form method="POST" enctype=multipart/form-data>
<input type='file' name="file" webkitdirectory >
<button>upload</button>
</form>
我们只要添加上 webkitdirectory 这个属性，在选择的时候就可以选择一个文件夹了，如果不加，文件夹被选中的时候就是灰色的。不过貌似加上这个属性就没法选中文件了... enctype=multipart/form-data 也是必要的，解释参见这里：http://blog.ncmem.com/wordpress/2019/08/09/js怎么上传文件夹/
如果用 ajax 方式，我们可以省去<form>，只留下<input>就 OK。
<input type='file' webkitdirectory >
<button id="upload-btn" type="button">upload</button>
但是这样是不够的，关键在于 Js 的使用。
var files = [];
$(document).ready(function(){
$("input").change(function(){
files = this.files;
});
});
$("#upload-btn").click(function(){
var fd = new FormData();
for (var i = 0; i < files.length; i++) {
fd.append("file", files[i]);
}
$.ajax({
url: "/upload/",
method: "POST",
data: fd,
contentType: false,
processData: false,
cache: false,
success: function(data){
console.log(data);
}
});
});
用 ajax 方式，我们必须手动构造一个 FormData Object, 然后放在 data 里面提交到后端。 FormData 好像就只有一个 append 方法，第一个参数是 key，第二个参数是 value，用来构造表单数据。ajax请求中，通过 input 元素的 files 属性获取上传的文件。files属性不论加不加 webkitdirectory 都是存在的，用法也基本一样。不过当我们上传文件夹时，files 中会包含文件相对路径的信息，之后会看到。
用 ajax 上传的好处有两点，首先是异步，这样不会导致页面卡住，其次是能比较方便地实现上传进度条。关于上传进度条的实现可以参考这里。需要注意的是contentType和processData必须设置成false，参考了这里：http://blog.ncmem.com/wordpress/2019/08/09/js怎么上传文件夹/