FormData+Ajax实现上传进度监控

什么是FormData？

FormData对象可以组装一组用 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实现上传进度监控，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vuejs使用FormData实现ajax上传图片文件

    vuejs使用FormData实现ajax上传图片文件

    我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件. 其实已经有朋友封装了相关的npm包,但是我想说用原生的js api来实现,也用不了多少代码,而且更灵活,能使用原生就尽量用原生.接下来就以一个简单的头像上传来说明如何使用. 效果图 前端实现 <template> <div class="admin"> <d

  • jQuery Ajax使用FormData上传文件和其他数据后端web.py获取

    XMLHttpRequest Level 2 添加了一个新的接口--FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件. jQuery 2.0+的版本支持FormData 方法一:使用<form>表单初始化FormData对象方式上传文件 •前端(JQuery): <form enctype="multipart/form-data"> <input type="file" na

  • 通过Ajax使用FormData对象无刷新上传文件方法

    写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比较敏感的网站慎用. 在工作中遇到了一个问题:在一个页面中,有4块内容,每块内容都包含一个图片上传功能,希望可以实现一键把这四块内容都上传上去. 我没有用插件实现上传功能,就是用的input[type=file],因此就遇到一个问题就是: ①传统的form表单会导致页面刷新,无法实现上述功能 ②把表单

  • 通过Ajax方式上传文件使用FormData进行Ajax请求

    通过传统的form表单提交的方式上传文件: Html代码  <form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data"> <h1 >测试通过Rest接口上传文件 </h1> <p >指定文

  • 基于Ajax的formData图片和数据上传

    最近做一个项目,关于用户数据和表单上传的项目,碰到了不少坑,这里总结的分享给大家,希望能够帮助大家.(小白,欢迎大家多交流) 多的就不说了,直接来代码吧!! 1.上传组件 说明一下,项目是基于vue框架的 <template> <div class="newproduct"> <div class="topbox"> <div class="shopbox"> <img class="

  • jQuery Ajax使用FormData对象上传文件的方法

    jQuery Ajax使用FormData对象上传文件的方法

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用FormData对象 有详尽的FormData对象使用说明. 但上传文件部分只有底层的XMLHttpRequest对象发送上传请求,那么怎么通过jQuery的Ajax上传呢? 本文将介绍通过jQuery使用FormData对象上传文件. 使用<form>表单初始化FormData对象方式上传文件 HTM

  • jQuery的ajax中使用FormData实现页面无刷新上传功能

    jQuery的ajax中使用FormData实现页面无刷新上传功能

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口.关于FormData,大家可以看MDN文档. 1,先看效果图 期望的功能和效果很简单:点击页面中的上传文件表单控件,选择文件后点击"ajax提交",将文件上传至服务器,上传成功后,页面给出一个简单的提示. 2,前端的代

  • FormData+Ajax实现上传进度监控

    什么是FormData? FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对.它可以更灵活方便的发送表单数据,因为可以独立于表单使用.如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同: 如何创建一个FormData对象 你可以自己创建一个FormData对象,然后通过调用它的append()方法添加字段,就像这样: //实例化一个formData对象 var

  • Ajax 文件上传进度监听之upload.onprogress案例详解

    $.ajax实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compati

  • HTML5 Ajax文件上传进度条如何显示

    原本打算使用jquery插件进行异步文件上传,比如uploadfy但是需要额外的支持,也有人用iframe模仿异步上传机制,感觉都比较别扭.因为项目不考虑低版本浏览器,所以决定用html5实现.下面只是一个简单的demo,具体样式需要自己去做. 后台基于strut2进行文件处理,具体因项目而定.只是要注意设置文件大小的限制.  <constant name="struts.multipart.maxSize" value="52428800"/>这个配置

  • 基于HTML5 Ajax文件上传进度条如何实现（jquery版本）

    基于HTML5 Ajax文件上传进度条如何实现（jquery版本）

    在上篇文章给大家介绍了这篇文章里面的后台Servlet.所以这里只看前台的JS代码. 首先HTML5用AJAX提交数据先要学习一个HTML5新增加的对象:FormData FormData 对象可以使用append 方法进行 key - value的数据添加,与以前我们常用的json不同的就是可以异步上传二进制文件. 1.FormDate对象的创建 var formData = new FormData(); 2.向 FormDate 对象添加数据 formData.append("catnam

  • jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码

    jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码

    本例用到其他2个php class.upload.php和 functions.php还有css和js以及img文件 完整实例代码点击此处本站下载. 效果图如下: 实现代码如下: JavaScript代码如下: 复制代码 代码如下: <script type="text/javascript">  $(document).ready(function() {      $("#filelist").niceScroll({          cursor

  • PHP使用Session实现上传进度功能详解

    本文实例讲述了PHP使用Session实现上传进度功能.分享给大家供大家参考,具体如下: 实现文件上传进度条基本是依靠JS插件或HTML5的File API来完成,其实PHP配合ajax也能实现此功能. PHP手册对于session上传进度是这么介绍的: 当 session.upload_progress.enabled INI 选项开启时,PHP 能够在每一个文件上传时监测上传进度. 这个信息对上传请求自身并没有什么帮助,但在文件上传时应用可以发送一个POST请求到终端(例如通过XHR)来检查

  • js HTML5 Ajax实现文件上传进度条功能

    本文实例介绍了js结合HTML5 Ajax实现文件上传进度条功能,分享给大家供大家参考,具体内容如下 1.  lib.js var Host = window.location.host; //--Cookie function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name +

  • PHP+apc+ajax实现的ajax_upload上传进度条代码

    PHP+apc+ajax实现的ajax_upload上传进度条代码

    本文实例讲述了PHP+apc+ajax实现的ajax_upload上传进度条代码.分享给大家供大家参考,具体如下: 上传进度条是怎么实现的呢?原理是怎么样的呢?当我们浏览,选择上传后,会产生一个临时文件,上传的时把这个临时文件,上传到服务器,上传完成后,这个临时文件会被删除掉.如果我们能读取这个临时文件的大小,就知道上传进度是多少了,php apc模块可以实现这个功能. 一.安装apc模块 下载地址:http://pecl.php.net/package/apc tar zxvf APC-3.1

  • ajax 异步上传带进度条视频并提取缩略图

    ajax 异步上传带进度条视频并提取缩略图

    最近在做一个集富媒体功能于一身的项目.需要上传视频.这里我希望做成异步上传,并且有进度条,响应有状态码,视频连接,缩略图. 服务端响应 { "thumbnail": "/slsxpt//upload/thumbnail/fdceefc.jpg", "success": true, "link": "/slsxpt//upload/video/fdceefc.mp" } 并且希望我的input file控件不

  • jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】

    本文实例讲述了jquery+ajax实现上传图片并显示上传进度功能.分享给大家供大家参考,具体如下: jquery上传文件用的formdata,上传进度条需要添加xhr的onprogress html代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib

随机推荐