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 传输结束但不知道是否成功

巴特西

【JavaScript-基础-文件上传】

Upload

最原始方式 form表单提交

xhr2

关于xhr:

xhr2

请求时限

FormData(HTML5新增属性)

接受二进制数据

progress

最新文章

热门文章