三重水的博客

在变化当中不断记录自己，充实自己，浏览自己

Formdata异步上传文件的实现

使用FormData来实现文件上传

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

var xhr = new XMLHttpRequest(),
fd = new FormData();
//file为上传的file对象，将文件放入FormData对象中,第三个参数是指定文件名,或者可以不指定。
fd.append('file', file, file.name); 
fd.append('type',1); // 继续追加数据   
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.addEventListener('load',function(evt){ // 监听上传完成
    var response = evt.target.response;     // 返回的数据
    //do something...
})
xhr.upload.addEventListener('progress', function(evt){ // 监听上传进度
    //lengthComputabel: 文件长度是否可计算
    if(evt.lengthComputable){
        //evt.loaded: 已下载的字节数
        //evt.total: 文件总字节数
        var percent = Math.round(evt.loaded*100/evt.total);
        console.log(percent);
    }
})
xhr.abort() // 终止文件上传方法
xhr.addEventListener('abort', function(evt){ // 监听文件被终止上传
    // do something...
})
xhr.addEventListener('error', function(evt){ // 监听上传错误
    // do something...
})
xhr.addEventListener('loaded', function(evt){ // 监听传输结束事件: 不管成功或者失败都会触发
    // do something...
})

xhr.open('post', url, true);
xhr.send(fd);

评论