对象的使用,Ajax实现上传进度监控

时间:2019-05-17 18:01来源:亚洲城ca88唯一官方网站
什么是FormData? FormData Ajax达成上传进度监督检查,formdataajax 什么是FormData? FormData对象足以建立1组用XMLHttpRequest发送请求的键/值对。它能够越来越灵敏方便的出殡和埋葬表单数据,因

什么是FormData?

FormData Ajax达成上传进度监督检查,formdataajax

什么是FormData?

FormData对象足以建立1组用 XMLHttpRequest发送请求的键/值对。它能够越来越灵敏方便的出殡和埋葬表单数据,因为能够独立于表单使用。如若你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的多少格式和表单通过submit() 方法传输的多寡格式同样;

何以成立八个FormData对象

你能够谐和创制三个FormData对象,然后经过调用它的append()方法增多字段,就好像那样:

//实例化一个formData对象
var formData = new FormData();
formData.append("username", "Groucho");
formData.append("userid", 123456); // 数字 123456 会被立即转换成字符串 "123456"
// HTML上的 文件类型input[type=file]的文件框,由用户选择
formData.append("userfile", fileInputElement.files[0]);
// JavaScript file-like 对象
var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...
var blob = new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);

只顾:字段 “userfile” 和 “webmasterfile” 都包蕴三个文件. 字段 “userid” 是数字类型,它将被FormData.append()方法转变来字符串类型(FormData 对象的字段类型可以是 Blob, File, 也许 string: 若是它的字段类型不是Blob也不是File,则会被转变来字符串类型。

选取jQuery的Ajax方法发送FormData数据

//记录当前时间
var time=new Date().getTime();
//记录当前进度
var percentage =null;
//记录当前上传速度
var velocity=null;
//记录已上传文件字节大小
var loaded=0;
$.ajax({
 url: 'Url',
 type: "POST",
 data: formData,
 contentType: false, // 必须 不设置内容类型
 processData: false, // 必须 不处理数据
 xhr: function xhr() {
  //获取原生的xhr对象
  var xhr = $.ajaxSettings.xhr();
  if (xhr.upload) {
   //添加 progress 事件监听
   xhr.upload.addEventListener('progress', function (e) {
    var nowDate = new Date().getTime();
    //每一秒刷新一次状态
    if (nowDate - time >= 1000) {
     //已上传文件字节数/总字节数
     percentage = parseInt(e.loaded / e.total * 100);
     //当前已传大小(字节数)-一秒前已传文件大小(字节数)
     velocity = (e.loaded - loaded) / 1024;
     if (percentage >= 99) {
      $(".hintText").html('服务端正在解析,请稍后');
     } else {
      //修改上次记录时间及数据大小
      time = nowDate;
      loaded = e.loaded;
     }
    } else {
     return;
    }
   }, false);
  }
  return xhr;
 },
 success: function success(response) {
  //成功回调   
 },
 error: function error(error) {
  //失败回调    
 }
});

总结

如上所述是笔者给我们介绍的FormData Ajax完毕上传进度督查,希望对大家持有帮助,如若我们有此外疑问请给自家留言,小编会及时过来大家的。在此也特别谢谢大家对帮客之家网站的援助!

什么是FormData? FormData对象能够创设一组用 XMLHttpRequest发送请求的键/值对。它能够越来越灵敏方便的发...

FormData 对象的使用

在本作品中

  1. 什么制造二个FormData对象
  2. 经过HTML表单创造FormData对象
  3. 采纳FormData对象上传文件
  4. 经过AJAX提交表单和上传文件能够不使用FormData对象
  5. 相关链接

透过FormData对象能够建立一组用 XMLHttpRequest出殡请求的键/值对。它能够越来越灵敏方便的出殡表单数据,因为能够单独于表单使用。假诺您把表单的编码类型设置为multipart/form-data ,则透过FormData传输的数额格式和表单通过submit() 方法传输的数据格式同样

FormData对象足以创设一组用 XMLHttpRequest发送请求的键/值对。它能够更加灵活方便的出殡表单数据,因为能够独自于表单使用。假设你把表单的编码类型设置为multipart/form-data ,则透过FormData传输的数量格式和表单通过submit() 方法传输的数目格式一样;

何以创立三个FormData对象Edit

您能够和煦创设三个FormData对象,然后经过调用它的append()措施加多字段,就如这么:

var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); // 数字 123456 会被立即转换成字符串 "123456"

// HTML 文件类型input,由用户选择
formData.append("userfile", fileInputElement.files[0]);

// JavaScript file-like 对象
var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...
var blob = new Blob([content], { type: "text/xml"});

formData.append("webmasterfile", blob);

var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);

注意:字段 "userfile" 和 "webmasterfile"  都包蕴1个文件. 字段 "accountnum" 是数字类型,它将被FormData.append()措施调换来字符串类型(FormData 对象的字段类型能够是 BlobFile, 或者 string: 借使它的字段类型不是Blob也不是File,则会被转变到字符串类型。

地点的躬体力行创制了1个FormData实例,包罗"username", "accountnum", "userfile" 和 "webmasterfile"多个字段,然后利用XMLHttpRequestsend())方法发送表单数据。字段 "webmasterfile" 是 Blob类型。一个 Blob指标表示3个不可变的, 原始数据的好像文件对象。Blob代表的数目不肯定是三个JavaScript原生格式。 File 接口基于Blob,承接blob功效并将其扩充为援救用户系统上的文本。你能够透过 Blob() 构造函数成立2个Blob对象。

哪些创制3个FormData对象

通过HTML表单创立FormData对象Edit

想要构造二个饱含Form表单数据的FormData对象,需求在创立FormData对象时钦赐表单的因素。

var formData = new FormData(someFormElement);
示例:
var formElement = document.querySelector("form");
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
request.send(new FormData(formElement));

你还能在开立多个带有Form表单数据的FormData对象之后和发送请求此前,附加额外的数目到FormData对象里,像这么:

var formElement = document.querySelector("form");
var formData = new FormData(formElement);
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
formData.append("serialnumber", serialNumber  );
request.send(formData);

那般你就能够在出殡和埋葬请求以前自由地附加不自然是用户编辑的字段到表单数据里

你能够本人创立二个FormData对象,然后经过调用它的append()方法增多字段,就如那样:

动用FormData对象上传文件Edit

您还足以应用FormData上传文件。使用的时候须求在表单中增多三个文件类型的input:

<form enctype="multipart/form-data" method="post" name="fileinfo">
  <label>Your email address:</label>
  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
  <label>Custom file label:</label>
  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
  <label>File to stash:</label>
  <input type="file" name="file" required />
  <input type="submit" value="Stash the file!" />
</form>
<div></div>

下一场使用下边包车型客车代码发送请求:

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {

  var oOutput = document.querySelector("div"),
      oData = new FormData(form);

  oData.append("CustomField", "This is some extra data");

  var oReq = new XMLHttpRequest();
  oReq.open("POST", "stash.php", true);
  oReq.onload = function(oEvent) {
    if (oReq.status == 200) {
      oOutput.innerHTML = "Uploaded!";
    } else {
      oOutput.innerHTML = "Error "   oReq.status   " occurred when trying to upload your file.<br />";
    }
  };

  oReq.send(oData);
  ev.preventDefault();
}, false);

注意:假诺FormData对象是经过表单创设的,则表单中钦定的伸手情势会被利用到艺术open()中 。

您还足以一直向FormData对象附加File或Blob类型的文本,如下所示:

data.append("myfile", myBlob, "filename.txt");

使用appned()方法时,能够经过第三个可选参数设置发送请求的头 Content-Disposition点名文件名。如果不钦定文件名(或许不帮忙该参数时),将利用名字“blob”。

若是您设置科学的布署项,你也能够透过jQuery来行使FormData对象:

var fd = new FormData(document.querySelector("form"));
fd.append("CustomField", "This is some extra data");
$.ajax({
  url: "stash.php",
  type: "POST",
  data: fd,
  processData: false,  // 不处理数据
  contentType: false   // 不设置内容类型
});
//实例化一个formData对象
var formData = new FormData();
formData.append("username", "Groucho");
formData.append("userid", 123456); // 数字 123456 会被立即转换成字符串 "123456"
// HTML上的 文件类型input[type=file]的文件框,由用户选择
formData.append("userfile", fileInputElement.files[0]);
// JavaScript file-like 对象
var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...
var blob = new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);

经过AJAX提交表单和上传文件能够不选择FormData对象

只要你想明白不使用FormData对象的图景下,通过AJAX连串化和交由表单 请点击这里。

blob对象深远领悟,移步这里:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

本文转发于mdn:

瞩目:字段 “userfile” 和 “webmasterfile” 都包罗2个文件. 字段 “userid” 是数字类型,它将被FormData.append()方法转变到字符串类型(FormData 对象的字段类型能够是 Blob, File, 大概 string: 如若它的字段类型不是Blob也不是File,则会被调换到字符串类型。

行使jQuery的Ajax方法发送FormData数据

//记录当前时间
var time=new Date().getTime();
//记录当前进度
var percentage =null;
//记录当前上传速度
var velocity=null;
//记录已上传文件字节大小
var loaded=0;
$.ajax({
 url: 'Url',
 type: "POST",
 data: formData,
 contentType: false, // 必须 不设置内容类型
 processData: false, // 必须 不处理数据
 xhr: function xhr() {
  //获取原生的xhr对象
  var xhr = $.ajaxSettings.xhr();
  if (xhr.upload) {
   //添加 progress 事件监听
   xhr.upload.addEventListener('progress', function (e) {
    var nowDate = new Date().getTime();
    //每一秒刷新一次状态
    if (nowDate - time >= 1000) {
     //已上传文件字节数/总字节数
     percentage = parseInt(e.loaded / e.total * 100);
     //当前已传大小(字节数)-一秒前已传文件大小(字节数)
     velocity = (e.loaded - loaded) / 1024;
     if (percentage >= 99) {
      $(".hintText").html('服务端正在解析,请稍后');
     } else {
      //修改上次记录时间及数据大小
      time = nowDate;
      loaded = e.loaded;
     }
    } else {
     return;
    }
   }, false);
  }
  return xhr;
 },
 success: function success(response) {
  //成功回调   
 },
 error: function error(error) {
  //失败回调    
 }
});

总结

如上所述是小编给大家介绍的FormData Ajax实现上传进程监督检查,希望对大家享有帮忙,就算大家有任何疑问请给本身留言,作者会及时恢复大家的。在此也非常感激我们对台本之家网址的支撑!

你也许感兴趣的小说:

  • jQuery datatables插件贯彻ajax加载数据与增删改查作用示例
  • ajax请求data遇到的标题浅析
  • Servlet获取AJAX POST请求中参数以form data和request payload情势传输的格局
  • 采纳 FormData 对象和 Spring MVC 协作完毕Ajax文件下载成效
  • vuejs使用FormData完毕ajax上传图片文件
  • jQuery.Ajax()的data参数类型详解
  • jQuery Ajax使用FormData上传文件和别的数据后端web.py获取
  • 详解ajax的data参数错误变成页面崩溃

编辑:亚洲城ca88唯一官方网站 本文来源:对象的使用,Ajax实现上传进度监控

关键词: 亚洲城ca88