JavaScript-基础-文件上传

Posted talkbear

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript-基础-文件上传相关的知识,希望对你有一定的参考价值。

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-基础-文件上传的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段12——JavaScript的Promise对象

VSCode自定义代码片段12——JavaScript的Promise对象

Alamofire 文件上传出现错误“JSON 文本未以数组或对象开头,并且允许未设置片段的选项”

html 将以编程方式附加外部脚本文件的javascript代码片段,并按顺序排列。用于响应式网站,其中ma

[vscode]--HTML代码片段(基础版,reactvuejquery)

JavaScript超大文件上传