我想使用js下载html的input标签上传的文件到文件夹里,怎样写?
2条回答 默认 最新
- ShowMeAI 2022-12-21 14:11关注
望采纳。JavaScript无法直接下载或保存文件到本地。但是可以使用 JavaScript 操作 HTML5 提供的文件 API 来实现这一目的。
首先,你需要在 HTML 中添加一个文件上传的 input 标签,让用户选择要下载的文件。然后,在 JavaScript 中,你可以使用 FileReader 对象来读取文件内容,并使用 Blob 对象来将文件内容保存为二进制数据。最后,你可以使用 a 标签的 download 属性来下载该文件。
<!-- HTML 中的文件上传 input 标签 --> <input type="file" id="fileInput">
// 获取文件上传 input 的 DOM 元素 const fileInput = document.getElementById('fileInput'); // 监听文件上传 input 的 change 事件 fileInput.addEventListener('change', function () { // 获取选择的文件 const file = fileInput.files[0]; // 创建 FileReader 对象 const reader = new FileReader(); // 监听 FileReader 的 load 事件 reader.addEventListener('load', function () { // 获取文件内容 const fileContent = reader.result; // 创建 Blob 对象,将文件内容保存为二进制数据 const fileBlob = new Blob([fileContent], { type: file.type }); // 创建 a 标签 var a = document.createElement('a'); // 设置 a 标签的属性 a.style.display = 'none'; a.href = url; a.download = fileName; // 将 a 标签添加到文档中 document.body.appendChild(a); // 触发 a 标签的点击事件 a.click(); // 移除 a 标签 document.body.removeChild(a);
function downloadFile(url) { // 创建一个隐藏的 a 标签 const a = document.createElement('a'); a.style.display = 'none'; a.href = url; // 下载文件的文件名 a.download = 'filename'; document.body.appendChild(a); // 触发下载 a.click(); // 删除 a 标签 document.body.removeChild(a); } // 获取文件的 URL,可以使用 input 标签的 value 属性或者自己实现文件上传功能 const fileUrl = document.getElementById('file-input').value; downloadFile(fileUrl);
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报