Recently, I encountered a requirement in the process of doing a project: it is required to directly upload the folder and all the contents under the folder, and retain the relevant nested information in the folder.
Did some research and concluded as follows:
-
How to upload a folder directly? Use
webkitdirectoryproperties, similar to mutiple properties. But there is no official specification for this property, so you need to be careful when using it.
-
How to get folder information of uploaded files?
<body>
<input type="file" id="file" webkitdirectory>
<script>
const inputElement = document.getElementById("file");
const onFileChange = (e) => {
console.log(e.target.files)
};
inputElement.addEventListener("change", onFileChange, false);
</script>
</body>
The structure of the resulting file is as follows:
The folder structure I uploaded is as follows: As
you can see, we can get information related to the folder structure through webkitRelativePath, .split("/") the obtained value, and then parse it according to our actual needs~ Because the "/" character is not allowed in file and folder names, so you don't have to worry about what will happen to split("/")~
- How does the front end obtain information about the file upload progress?
The front end gets the upload progress information