php ajax formdata 进度,FormData+Ajax实现上传进度监控

妖狐艹你老母 2022-11-12 09:40 213阅读 0赞

FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利。接下来通过本文给大家分享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 = '**hey!**'; // 新文件的正文...

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) \{

//失败回调

\}

\});

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

发表评论取消回复

表情：

评论列表（有 0 条评论，213人围观）

还没有评论，来说两句吧...

相关阅读

相关使用PHP和Ajax实现文件上传进度条

在Web开发中，文件上传是一个常见的功能需求。当处理大型文件或者网络连接较慢时，用户可能需要了解文件上传的进度情况。本文将介绍如何使用PHP和Ajax来实现一个文件上传进度条的

爱被打了一巴掌/ 2024年02月29日 03:07/ 0 赞/ 155 阅读

相关 php ajax formdata 进度,FormData+Ajax实现上传进度监控

FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利。接下来通过本文给大家分享For

妖狐艹你老母/ 2022年11月12日 09:40/ 0 赞/ 214 阅读

相关 PHP上传文件进度条的实现详情

今天研究了下PHP上传文件进度条的实现方法,从网上查到的资料,实现PHP上传文件进度条提示的方法主要有三种,这三种方法分别是: 1、使用PHP的创始人 Rasmus Lerd

阳光穿透心脏的1/2处/ 2022年08月25日 15:45/ 0 赞/ 307 阅读

相关 servlet.Ajax实现上传文件进度条

这里关于servlet如何上传文件就先不说了,将如何得到已经上传的文件数据的百分比... 首先我们先写一个类这个类要实现ProgressListener这个接口,实

待我称王封你为后i/ 2022年08月18日 12:21/ 0 赞/ 256 阅读

相关 jquery ajax实现上传文件代码，带进度条

原文：[jquery ajax实现上传文件代码，带进度条][jquery ajax] 源代码下载地址：[http://www.zuidaima.com/share/155046

旧城等待，/ 2022年08月10日 15:56/ 0 赞/ 252 阅读

相关阿里云 OSS监控上传进度

阿里云 OSS监控上传进度 [阿里云上传进度SDK][SDK] 使用阿里云带进度条的上传，然后将长传进度存入session // 带进度条的上传

迈不过友情╰/ 2022年05月14日 02:57/ 0 赞/ 387 阅读

相关 SpringBoot MultipartFile 监控上传文件进度

＃ SpringBoot MultipartFile监控上传文件进度>引用块内容 > 在一次项目中需要监控文件上传的进度。将进度监控到之后计算百分比，存入session中se

淩亂°似流年/ 2022年05月13日 06:48/ 0 赞/ 956 阅读

相关 ajax 文件上传进度条

一：方案分析基于浏览器的文件上传，为了有更好的用户体验，我们一般就设置一个旋转的图标，旋转的图标无法实时的监控文件上传情况。所以我们将实现一个如何实时的监控

旧城等待，/ 2022年04月16日 06:53/ 0 赞/ 396 阅读

相关 php+uploadprogress实现上传进度功能

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][] 文件上传进度反馈, 这个需求在当前是越来越普遍, 比如大附件邮件. 在PHP5.4以前

向右看齐/ 2022年01月16日 23:15/ 0 赞/ 313 阅读

相关 Ajax formData上传文件 + 进度条

// require('./lib/ajax'); require('jquery'); var type=0,//0 dp 1 mt

小咪咪/ 2021年06月24日 15:58/ 0 赞/ 613 阅读