JavaScript函数实现文件上传与下载

在Web开发中，文件上传与下载是常见的功能需求。JavaScript作为前端开发的核心语言，为实现这些功能提供了强大的支持。

文件上传

使用JavaScript实现文件上传，首先需要借助HTML的<input>元素，将其type属性设置为file。例如：<input type="file" id="fileInput">。这样用户就可以选择本地文件。

接下来，通过JavaScript获取这个元素，并为其添加change事件监听器。示例代码如下：

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function (event) {
    const file = event.target.files[0];
    if (file) {
        const formData = new FormData();
        formData.append('file', file);
        // 这里假设后端有一个处理文件上传的接口
        fetch('/upload', {
            method: 'POST',
            body: formData
        })
      .then(response => response.json())
      .then(data => {
            console.log(data);
        })
      .catch(error => {
            console.error('上传文件时出错:', error);
        });
    }
});

在这段代码中，当用户选择文件后，change事件触发。获取到选择的文件后，将其添加到FormData对象中。然后使用fetch API将文件发送到后端服务器指定的接口。

文件下载

实现文件下载也有多种方式。一种简单的方法是创建一个<a>标签，并设置其href和download属性。例如：

function downloadFile(url, fileName) {
    const a = document.createElement('a');
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

在上述代码中，downloadFile函数接收文件的URL和要下载的文件名。通过创建<a>标签，设置好href和download属性后，将其添加到页面并模拟点击，从而触发文件下载。下载完成后，再将<a>标签从页面移除。

通过JavaScript函数，我们可以方便地实现文件上传与下载功能，为用户提供更便捷的交互体验。无论是在单页面应用还是传统的Web项目中，掌握这些技术都能极大地提升开发效率与项目的实用性。