练习时长两年半的Programmer 2022-12-21 13:52 采纳率: 81.5%
浏览 30
已结题

怎样使用js下载html上传的文件

我想使用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);
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 12月31日
  • 已采纳回答 12月23日
  • 创建了问题 12月21日