JavaScript-基础-文件上传

Posted 2021-01-12 talkbear

Upload

最原始方式 form表单提交

// html
<form method="get" action="/test/upload">
    <input type="file" name="test" accept="image/jpeg, image/png" />
    <input type="submit" value="Submit" />
    <!-- <input id="submit" type="button" value ="Submit" /> -->
</form>

兼容性：所有浏览器都支持。

xhr2

关于xhr:

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        alert(xhr.resopnseText);
    }else{
        alert(xhr.statusText);
    }
}

xhr.open(‘get‘, ‘example.php‘);
xhr.send();

老版本xhr主要属性：

• xhr.readyState：XMLHttpRequest对象的状态，等于4表示数据已经接收完毕。
• xhr.status：服务器返回的状态码，等于200表示一切正常。
• xhr.responseText：服务器返回的文本数据
• xhr.responseXML：服务器返回的XML格式的数据
• xhr.statusText：服务器返回的状态文本。

缺点：

• 不支持读取和传送二进制文件。
• 不能进行进度信息跟踪。
• 受到“同域限制”，只能向同一域名的服务器请求数据。

xhr2

新版本的XMLHttpRequest对象，具有更多的特性：

• 可以设置HTTP请求的时限
• 可以使用FormData对象管理表单数据
• 上传文件
• 跨域请求
• 获取服务器二进制数据
• 可获取数据传输的进度

请求时限

xhr.timeout = 3000;
xhr.ontimeout = function(e){
    console.log(e);
}

FormData(HTML5新增属性)

该对象可以模拟表单。

var fdata = new FormData;
var xhr = XMLHttpRequest();

// 添加表单项
fdata.append(‘username‘, ‘张三‘);

xhr.open(‘POST‘, ‘test/upload‘ );

// 最后使用xhr2直接发送该表单对象
xhr.send(fdata);

// 也可以用来获取页面的表单

var form = document.getElementById(‘testForm‘);

var fData = new FormData(form);

fData.append(‘test‘, 123);

xhr.send(fdata);

// 上传文件

fData.append(‘name‘, file) // file 为input[type=file] change事件函数返回的file对象

接受二进制数据

略

progress

新版本xhr对象拥有progress事件。通过onprogress函数监听。

progess事件在该版本中分两种。上传时属于xhr对象，下载时属于xhr.upload对象。

document.getElementById(‘upload‘).addEventListener(‘change‘, function(){
    var file = this.files[0];
    var xhr = XMLHttpRequest();
    var formdata = new FormData(document.getElementById(‘form‘));

    formdata.append(‘test‘, 123);
    formdata.append(‘file‘, file);
    
    // 监听progress事件了 上传
    
    xhr.upload.onprogress = function(e){
        if(event.lengthComputable){
            var percentComplete = e.loaded / e.total;
        }
    }
    xhr.open(‘POST‘, ‘testagain‘);
    xhr.send(formdata);
  
})

其他相关事件：

• xhr.onload 传输完成
• xhr.onabort 传输被取消
• xhr.error 传输中出现错误
• xhr.onloadstart 开始传输
• xhr.onloadend 传输结束 但不知道是否成功