欢迎来到知了汇智!
联系电话:知了汇智-电话号码 028-62016472 / 13228113191

HTML5 文件上传的2种方式-知了汇智

HTML5 文件上传的2种方式

  以前上传文件需要提交Form表单。

  HTML5方式上传文件,可以通过使用FormData类模拟Form表单提交,从而实现无刷新上传文件。

HTML5 文件上传的2种方式

 

  假设有一个文件选择框

<input type="file" name="pic" id="pic" accept="image/gif" />

 

  有下面2种方式上传文件:

  1、XMLHttpRequest(有进度事件)


var files = document.getElementById('pic').files; //files是文件选择框选择的文件对象数组
 
if(files.length == 0) return; 
 
var form = new FormData(), 
    url = 'http://.......', //服务器上传地址
    file = files[0];
form.append('file', file);
 
var xhr = new XMLHttpRequest();
xhr.open("post", url, true);
 
//上传进度事件
xhr.upload.addEventListener("progress", function(result) {
    if (result.lengthComputable) {
        //上传进度
        var percent = (result.loaded / result.total * 100).toFixed(2); 
    }
}, false);
 
xhr.addEventListener("readystatechange", function() {
    var result = xhr;
    if (result.status != 200) { //error
        console.log('上传失败', result.status, result.statusText, result.response);
    } 
    else if (result.readyState == 4) { //finished
        console.log('上传成功', result);
    }
});
xhr.send(form); //开始上传

  2、Fetch API(目前不支持进度事件)
 

var form = new FormData(),
    url = 'http://.......', //服务器上传地址
    file = files[0];
form.append('file', file);
 
fetch(url, {
    method: 'POST',
    body: form
}).then(function(response) {
    if (response.status >= 200 && response.status < 300) {
        return response;
    } 
    else {
        var error = new Error(response.statusText);
        error.response = response;
        throw error;
    }
}).then(function(resp) {
    return resp.json();
}).then(function(respData) {
    console.log('文件上传成功', respData);
}).catch(function(e) {
    console.log('文件上传失败', e);
});


 

     版权声明:本文来源于网络,由知了堂搜集整理,仅供大家学习前端时使用

132 2811 3191
预约免费试学
点击咨询
预约试学