JavaScript纯前端上传和下载文件

不涉及前后端交互，由前端数据生成文件并下载和上传文件前端解析的过程。

目录

一、由前端数据生成文件并下载

1. 函数编写

2. 使用方法

二、上传文件并解析

         1. 函数编写

2. 使用方法

总结

---

一、由前端数据生成文件并下载

1. 函数编写

由JS代码生成一个<a>标签元素。设置元素的href和download属性，为函数传入参数的文件内容和文件名，并设置元素为不可见，以消除对前端界面的视觉影响。

将元素加入body，并模拟其点击事件，即下载一个内容为fileContent、名字为fileName的文件。并在点击事件后移除元素。

// 下载文件，文件名为fileName，文件内容为fileContent
function downloadFile(fileName, fileContent) {
    let element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContent));
    element.setAttribute('download', fileName);
    element.style.display = 'none';
    document.body.appendChild(element);

    element.click();

    document.body.removeChild(element);
}

2. 使用方法

可以在JS代码的任意执行时刻，动态传入参数实现文件的下载。如实现点击按钮下载文件的功能，则可以在按钮的点击事件中调用函数。

    $('#button').onclick = function() {
        downloadFile('Hello.txt', 'Hello World!');
    }

二、上传文件并解析

1. 函数编写

由JS代码生成一个<input>标签元素。设置元素的type属性为file，以，并设置元素为不可见。将元素加入body，并模拟其点击事件。其会唤醒一个文件上传对话框，用户可以手动选择需要上传解析的文件。

设置元素的onchange属性，在元素内容改变时，执行以下代码：

• 若元素内容为空，则直接返回；
• 若元素内容非空，且有上传文件，则创建一个FileReader，对文件内容进行读取。读取出的内容以字符串形式，由函数的传入参数也即对文件内容进行操作的回调函数进行处理。

// 上传文件，弹出上传对话框，文件内容由uploadCallBackFunction回调函数处理
function uploadFile(uploadCallBackFunction) {
    let element = document.createElement('input');
    element.setAttribute('type', 'file');
    element.style.display = 'none';
    element.onchange = function (){
        if (this.value==='')
            return;
        if (this.files[0]){
            let reader = new FileReader();
            reader.readAsText(this.files[0], "UTF-8");
            reader.onload = function(evt){
                let file_string = evt.target.result;
                uploadCallBackFunction(file_string);
            }
        }
    }
    document.body.appendChild(element);

    element.click();

    document.body.removeChild(element);
}

2. 使用方法

由于上传文件并读文件解析的操作是异步性的（写在onchange函数中），函数无法通过返回值返回需要的文件内容。因此通过参数传入回调函数的方式，在读取文件内容后调用，对读取到的内容进行处理。

    $('#button').onclick = function () {
        uploadFile(console.log);
    }

---

总结

使用纯前端的方式实现了文件的上传与下载。实际场景中，可以应用于一键导入导出前端页面保存的配置等；在支持不同文件格式时，可以使用前端解析的方式使数据格式统一，降低前后端交互过程的耦合性。