h5中文件上传下载实例

文件上传

文件上传是Web开发中常见的功能之一，可以让用户将本地的文件上传到服务器上。在H5中，我们可以使用HTML5的File API来实现文件上传功能。

首先，在HTML中创建一个文件上传的表单：

<form id="uploadForm" enctype="multipart/form-data">
  <label for="fileInput">选择文件:</label>
  <input type="file" id="fileInput" name="fileInput">
  <input type="submit" value="上传">
</form>

通过以上代码，我们创建了一个包含文件选择和上传按钮的表单。

接下来，我们需要编写JavaScript代码来处理文件上传的逻辑：

// 获取表单元素和文件选择框
var form = document.getElementById('uploadForm');
var fileInput = document.getElementById('fileInput');

// 监听表单的提交事件
form.addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止表单默认的提交行为

  // 获取文件对象
  var file = fileInput.files[0];

  // 创建FormData对象
  var formData = new FormData();
  formData.append('file', file);

  // 发送文件上传请求
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log('文件上传成功');
    } else {
      console.log('文件上传失败');
    }
  };
  xhr.send(formData);
});

文件下载

文件下载是指用户从服务器端获取文件，并保存到本地。在H5中，可以使用a标签的download属性来实现文件下载功能。

首先，在服务器端准备好待下载的文件。然后，编写HTML代码来创建下载链接：

<a href="/path/to/file" download>点击下载文件</a>

以上代码中，href属性指定了待下载文件的URL，download属性表示这是一个下载链接，点击后将触发文件下载。

通过以上代码，我们就可以实现文件的上传和下载功能了。文件上传通过FormData对象将文件发送到服务器端，文件下载则通过a标签的download属性来实现。

总结

文件上传和下载是Web开发中常见的需求，通过HTML5的File API和a标签的download属性，我们可以很方便地实现这些功能。

文件上传的关键在于创建FormData对象，并将文件追加到该对象中，再通过XMLHttpRequest发送文件上传请求。

文件下载的关键在于设置a标签的href属性为待下载文件的URL，并添加download属性，以告诉浏览器这是一个下载链接。

通过HTML5的File API和a标签的download属性，我们可以给用户带来更好的文件上传和下载体验。