首页创建文件夹并将上传的文件保存 js

创建文件夹并将上传的文件保存 js

时间: 2023-09-19 13:10:54 浏览: 167

文件上传js

文件上传，用js实现，希望可以帮助到大家。

在 JavaScript 中，我们无法直接创建文件夹，但可以通过创建文件的方式来模拟创建文件夹的效果。在 HTML 中，我们可以使用 `<input type="file">` 元素来上传文件，然后通过 JavaScript 将文件保存在指定的文件夹中。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>Save Uploaded File using JavaScript</title> </head> <body> <input type="file" id="file-input"> <button id="save-btn">Save File</button> <script> document.getElementById("save-btn").addEventListener("click", function(){ var fileInput = document.getElementById("file-input"); if (fileInput.files.length > 0) { var file = fileInput.files[0]; var folderName = "my-folder"; var fileName = file.name; var folder = new Blob([], { type: 'application/octet-stream' }); folder.webkitRelativePath = folderName + "/"; var fileReader = new FileReader(); fileReader.onload = function(event) { var fileContent = event.target.result; var fileBlob = new Blob([fileContent], { type: 'application/octet-stream' }); fileBlob.webkitRelativePath = folderName + "/" + fileName; var zip = new JSZip(); zip.file(folderName + "/" + fileName, fileBlob); zip.file(folderName + "/", folder); var zipContent = zip.generate({ type: "blob" }); saveAs(zipContent, folderName + ".zip"); }; fileReader.readAsArrayBuffer(file); } }); </script> </body> </html> ``` 这个例子中，我们创建了一个 `<input type="file">` 元素来让用户上传文件，然后创建了一个名为 `my-folder` 的文件夹，并将上传的文件保存在该文件夹中。我们使用了一个第三方库 JSZip 来创建 ZIP 压缩包，并将文件夹和文件添加到压缩包中。最后，我们通过 `saveAs()` 函数来下载该压缩包。

阅读全文