我想通过html实现多组照片转文件压缩包
要通过HTML实现多组照片转文件压缩包,你可以使用JavaScript和第三方库来完成。
首先,你需要在HTML中创建一个包含多个照片上传的表单。例如:
<form id="photoForm" enctype="multipart/form-data">
<input type="file" name="photos" multiple>
<button type="submit">压缩照片</button>
</form>
接下来,你需要使用JavaScript来处理表单的提交事件,并将照片压缩为文件压缩包。你可以使用JSZip库来实现这个功能。首先,在HTML中引入JSZip库:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js"></script>
然后,在JavaScript中处理表单的提交事件:
document.getElementById('photoForm').addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单的默认提交行为
var files = document.querySelector('input[type="file"]').files;
var zip = new JSZip();
// 遍历所有选中的文件
for (var i = 0; i < files.length; i++) {
var file = files[i];
// 压缩照片到zip文件中
zip.file(file.name, file);
}
// 生成zip文件
zip.generateAsync({ type: 'blob' }).then(function(content) {
// 创建一个可下载的链接
var downloadLink = document.createElement('a');
downloadLink.href = window.URL.createObjectURL(content);
downloadLink.download = 'photos.zip';
downloadLink.click();
});
});
以上代码会在表单提交时,将选中的照片文件压缩为名为"photos.zip"的文件,并提供一个下载链接。
需要注意的是,由于涉及到文件操作,该功能无法在浏览器的沙箱环境中运行,你需要将代码部署到服务器上才能正常工作
原文地址: https://www.cveoy.top/t/topic/hIlp 著作权归作者所有。请勿转载和采集!