input(file)异步上传文件

Posted 2020-09-26 令狐る侠

页面

<input id="file" name="file" type="file">
<button id="btn" type="button">上传</button>

//异步上传文件
var $file = $(‘#file‘);
$(‘#btn‘).click(function() {
    var data = new FormData();
    data.append(‘file‘, $file[0].files[0]);
    data.append(‘foo‘, ‘bar‘);

    var xhr = new XMLHttpRequest();
    xhr.open(‘post‘, ‘/upload(上传请求地址)‘);
    xhr.onload = function(e) {
        alert(e.currentTarget.response);
        //console.log(e.currentTarget.response);
    }
    xhr.send(data);
});
注意：一般情况下 通过form标单 中加上 enctype="multipart/form-data" 即可，上述为input(file)特殊情况上传文件