浏览器的文件上传和下载

背景:

　　文件的上传和下载在Web的日常使用是很常见的功能，在项目开发中也会涉及到文件的 上传和下载，下面来说是上传和下载的实现。 

文件上传：

1. 原生表单：

　　原生表单实现文件上传的方式很简单，只需要在form标签中使用input标签即可， multiple属性的作用是设置多个文件上传，如下: 

<form action="/example/html5/demo_form.asp" method="get"> 
传文件<input type="file" name="img" multiple="multiple" />
<input type="submit" />
</form>

2. FormData对象：

　　

　　FormData对象可以组装一组用XMLHttpRequest发送请求的键值对。可以通过js的

方式灵活的发送表单，当表单的编码类型设置为multipart/form-data时，则传输数据的方

式和通过submit方式传输的数据格式相同。具体的使用方式如下: 

  1. 创建FormData对象  
    1 var formData = new FormData()

  2. 调用append()方法添加字段: 

    append()方法接收三个参数，第一个参数为字段的名称，第二个属性为字段的值，第三个 参数为可选的参数，该参数可以设置发送请求的头 指定文件名。 

    1  // 传递字符串
2 formData.append('username', 'username') 
3  // 数字 123456 会被立即转换成字符串 "123456"
4 formData.append("accountnum", 123456);
5 // 传递文件，files为文件对象
6 formData.append('fileName', files[0])

  3. 发送请求: 

    最后通过发送ajax请求传输数据: 

    1 var request = new XMLHttpRequest();
2 request.open("POST", url);
3 request.send(formData);

    使用axios框架发送请求: 

     1 let hCloudApi = axios.create({
 2   baseURL: config.baseUrls
 3 })
 4 hCloudApi.post(`/wf/v1/approve`, formData, {
 5       headers: {'Content‐Type': 'multipart/form‐data'}
 6 }).then((rst) => {
 7    resolve(rst)
 8 }).catch(error => {
 9    reject(error)
10 })

    FormData的兼容性如下:

     

文件下载: 　　

　　1. a标签：

　　　　直接使用a标签指定href属性为下载的文件的url，同时设置download属性即可实现下 载，不过这种方式不兼容IE浏览器。 

　　　1 <a href="url" download='filename'>

　　2.表单提交 

　　　使用提交表单的方式不会有兼容性问题，该方式会调用浏览器的下载功能来下载文件。 实现方式为:创建表单及表单元素，设置相应的属性即可，该下载方式为单个文件的下载。

　　

 1 var $form = document.createElement('form')
 2 var $input = document.createElement('input')
 3 $input.setAttribute('type', 'hidden')
 4 $input.setAttribute('name', 'access_token')
 5 $input.setAttribute('value', token)
 6 $form.setAttribute('method', 'get')
 7 $form.setAttribute('action', url)
 8 $form.appendChild($input)
 9 document.body.appendChild($form)
10 $form.submit()

 

　

　　　　

posted @ 2018-03-29 18:09  konnga  阅读(281)  评论(0)  编辑  收藏  举报