原生js实现文件上传、下载、封装等实例方法

针对“原生js实现文件上传、下载、封装等实例方法”的完整攻略，我将从以下几个方面进行讲解：

1. 文件上传
2. 文件下载
3. 封装实例方法

文件上传

HTML

首先，在HTML中，需要创建一个文件上传的表单，其中包含一个input标签，类型为file：

<form enctype="multipart/form-data" method="post" action="./upload.php">
  <input type="file" name="file" />
  <input type="submit" value="上传文件" />
</form>

JavaScript

接下来，在JavaScript中，监听表单的submit事件，当用户点击“上传文件”按钮时，将文件上传到服务器。

var form = document.querySelector('form');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交
  var file = this.querySelector('[type="file"]').files[0]; // 获取文件
  var formData = new FormData(); // 创建formData对象
  formData.append('file', file); // 将文件添加到formData中
  var xhr = new XMLHttpRequest(); // 创建xhr对象
  xhr.onload = function() {
    console.log(xhr.responseText); // 上传成功的回调函数处理
  };
  xhr.open('POST', this.action, true);
  xhr.send(formData); // 发送formData
});

文件下载

HTML

在HTML中，需要创建一个下载的链接，例如：

<a href="./test.txt" download="test.txt">下载test.txt</a>

JavaScript

接下来，在JavaScript中，为下载链接添加点击事件，当用户点击链接时，将文件下载到本地。

var link = document.querySelector('[download]');
link.addEventListener('click', function(event) {
  event.preventDefault();
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var blob = new Blob([xhr.response], { type: 'text/plain' });
    var url = URL.createObjectURL(blob); // 创建下载链接
    var link = document.createElement('a');
    link.setAttribute('href', url);
    link.setAttribute('download', 'test.txt'); // 设置下载文件名
    link.click(); // 模拟点击下载链接
  };
  xhr.open('GET', this.getAttribute('href'));
  xhr.responseType = 'arraybuffer'; // 设置响应类型为arraybuffer
  xhr.send();
});

封装实例方法

以上是文件上传和下载的具体实现方法，现在，我们可以将它们封装成实例方法，方便我们在多个页面中重复使用这些功能。

文件上传

function uploadFile(fileInput, callback) {
  var file = fileInput.files[0]; // 获取文件
  var formData = new FormData(); // 创建formData对象
  formData.append('file', file); // 将文件添加到formData中
  var xhr = new XMLHttpRequest(); // 创建xhr对象
  xhr.onload = function() {
    callback(xhr.responseText); // 上传成功的回调函数处理
  };
  xhr.open('POST', './upload.php', true);
  xhr.send(formData); // 发送formData
}

• 参数说明：
• fileInput：文件输入框的DOM元素
• callback：上传成功的回调函数

文件下载

function downloadFile(url, fileName) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var blob = new Blob([xhr.response], { type: 'application/octet-stream' });
    var url = URL.createObjectURL(blob); // 创建下载链接
    var link = document.createElement('a');
    link.setAttribute('href', url);
    link.setAttribute('download', fileName); // 设置下载文件名
    link.click(); // 模拟点击下载链接
  };
  xhr.open('GET', url);
  xhr.responseType = 'arraybuffer'; // 设置响应类型为arraybuffer
  xhr.send();
}

• 参数说明：
• url：文件下载链接
• fileName：下载后的文件名

这样，在其他页面中，我们就可以直接调用这些方法，简化代码，实现文件上传、下载等功能。

例如：

var fileInput = document.querySelector('input[type="file"]');
uploadFile(fileInput, function(response) {
  console.log(response);
});

var downloadBtn = document.querySelector('[download]');
downloadBtn.addEventListener('click', function(event) {
  event.preventDefault();
  downloadFile(this.getAttribute('href'), this.getAttribute('download'));
});

示例1：文件上传示例

示例2：文件下载示例