Front-end implementation of upload folder and folder name acquisition

Recently, to do a label class project, the need is to upload folders (there are n images), and then in the system labeling work. A period of time has been the callout part of the interaction written, originally thought the folder upload very good, the results of a half-day effort, the online have some introduction, but are not too detailed.

According to the search results of the survey, ie basically can not achieve folder upload, because it is the system of the newly installed, there is no IE in the mirror, so can't test, according to the internet, ie only edge this browser version to achieve, other mainstream browser I have tested a bit, Under the Windows environment (Google, Firefox, Sogou, 360, QQ browser and other mainstream browser can be used) only need to add properties under the <input> tag:webkitdirectory

<input type="file" webkitdirectory/>

The previous articles on the internet were basically saying that only Google and edge browsers were available, but I tested them and the main browsers were ready to use them.

Tested for half a day and found another problem, how to get the folder name? After testing, it was found that the number of files in the folder, the name of the file, etc., but not the front-end implementation of folder name acquisition, and later found that the background is easy. My project folder name has a special meaning and needs to parse the folder name, so it takes so much effort to implement name fetching. The background can obtain a relative path to the received file, for example:

360download\01.jpg

This is equivalent to the indirect implementation of the folder name extraction.

Reference Links:   　　

https://laike9m.com/blog/wen-jian-jia-shang-chuan-cong-qian-duan-dao-hou-duan,59/

Front-end implementation of upload folder and folder name acquisition