Upload folder: front to back
Web development is a file upload problem will certainly be encountered, and the upload folder is more intractable. Online information about the folder to upload more concentrated in the front-end, back-end for lack of attention, and then speak to a back-end framework document upload articles and would not involve folder. Today study this issue, in this record.
Let me talk about two issues:
Are all the back-end frameworks support the upload folder?
Are all browsers support the upload folder?
The first question: YES, the second question: NO
As long as the back-end framework for support of the form is complete, then there must support the upload folder. As for the browser, as of now, only Chrome support.
If other browsers support it needs the help of plug-ins, such as the preferential large file upload control: www.webuploader.net
Function on WebUploader description:
Resume large file uploads
Support for large file uploads (100G +) and resume, you can close the browser, restart the system still continue to upload.
Open source
Provide ASP.NET, JSP, PHP examples and source code, which provides configuration and sample code JSP MySQL, Oracle, SQL Server database.
Fragment, concurrent
Concurrent binding fragment, a large file into multiple, concurrent upload, greatly improve the speed of large file upload.
When network problems cause transmission errors, only need to retransmit the wrong slice, rather than the entire file. In addition to more fragmented transmission of real-time tracking upload progress.
Preview, compression
Support for popular image formats jpg, jpeg, gif, bmp, png preview and compression, saving network data transmission.
meta information analysis in jpeg, for a variety of orientation made the right treatment, at the same time all the original meta data retention upload pictures after compression.
Multi-channel add files
Supports file multi-select, filter type, drag and drop (files & folders), picture paste function. Upload a local file specified path does not need to select the file by clicking a button.
Paste function is mainly reflected in the picture when there is data in the clipboard when (screen capture tools such as QQ (Ctrl + ALT + A), right-click on the picture click on the page to copy), Ctrl + V can be added to this image file.
HTML5 & FLASH
Compatible with the major browsers and browser versions low, consistent interface to achieve a two run-time support, users do not care about what the kernel for internal use. And support for IE6, IE8 browser.
At the same time part of Flash does not do any work-related UI, easy to not care about the flash users to extend and customize business needs.
IO operation carried out based on memory-mapped mode, give full play to the operating system performance.
MD5 seconds pass
When the large file size, the amount of relatively long time, do verify file md5 value before uploading support, you can skip consistency.
If the service end and front-end unified algorithm changes, take sections md5, can greatly enhance the performance verification, consuming around 20ms.
Scalable, can be split
The use of detachable mechanism, the various functional independence became a widget, you can freely mix.
AMD uses the code specification organization, clarity, easy to expand advanced players.
Upload Folder
Support 100,000 + level folder upload resume.
Support hierarchical directory structure preservation, database-level information can be stored in the database after upload.
Provide MySQL, Oracle, SQL Server database support.
Support folder resume, refresh the browser, restart still be able to continue to upload.
Upload cross-domain support.
PC end full platform support
Support for Windows, macOS, Linux. Operating system support for localization, support for government information security program.
Windows which supports low version of the system: Windows XP.
Which browsers include: IE6, IE7, IE8 (x86, x64), IE9 (x86, x64), IE10 (x86, x64), IE11 (x86, x64), 360 security browser, 360 speed browser, QQ browser , Sogou browser, Maxthon (travel) browser 1.X, Maxthon (Maxthon) browser 2.x, Firefox, Chrome, Opera 23+
Select a folder to upload
Folder upload is complete
Folder hierarchy in the server after uploading
Well, assuming that all of our users were using Chrome, how to do in order to successfully upload a file folder it? Here do not drop things on this tall, it is the most traditional <input>. It can be done with the form and submit ajax, look at the submit method.
<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怎么上传文件夹/