关键词：
【中文标题】进度条在 XMLHTTPRequest 中不起作用【英文标题】：Progress bar does not work in XMLHTTPRequest 【发布时间】：2016-04-29 20:28:18 【问题描述】：我想在 php 中上传图片但同时显示进度状态，在下面使用 XMLHttpRequest 的代码中，图片正在正确上传，但我看不到进度条在移动。
这是我的代码。请帮助解决我的问题。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style type="text/css">
.progress
display: block;
text-align: center;
width: 0;
height: 20px;
background: red;
transition: width .3s;
.progress.hide
opacity: 0;
transition: opacity 1.3s;
</style>
<script type="text/javascript">
$(document).ready(function()
$(document.body).on('click', '#button1' ,function(e)
var formData = new FormData($("#multiple_upload_form")[0]);
$.ajax(
xhr: function ()
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt)
if (evt.lengthComputable)
var percentComplete = evt.loaded / evt.total;
alert("percentComplete"+percentComplete);
console.log(percentComplete);
$('.progress').css(
width: percentComplete * 100 + '%'
);
if (percentComplete === 1)
$('.progress').addClass('hide');
, false);
xhr.addEventListener("progress", function (evt)
if (evt.lengthComputable)
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
$('.progress').css(
width: percentComplete * 100 + '%'
);
, false);
return xhr;
,
type: 'POST',
url: "ajax_upload.php",
mimeType:"multipart/form-data",
data: formData,
async : false,
cache : false,
contentType : false,
processData:false,
success: function (data) alert("data"+data);
);
);
);
</script>
</head>
<body>
<form method="post" enctype="multipart/form-data" id="multiple_upload_form">
<div class="progress"></div>
<input type="file" name="upload_f"/>
<input type="button" id="button1" name="button" value="submit"/>
</form>
</body>
</html>
ajax_upload.php
<?php
$output_dir = "upload/";
$type="video";
$fileName = $_FILES["upload_f"]["name"];
$extn = pathinfo($fileName, PATHINFO_EXTENSION);
if(move_uploaded_file($_FILES["upload_f"]["tmp_name"],$output_dir.$fileName))
echo "1";
else
echo "0";
?>
【问题讨论】：
alert("percentComplete"+percentComplete);的结果？
@AddWeb- 如果条件不进入控件，这就是为什么不显示警报的原因。请提供一些解决方案。
那你需要先检查：alert(evt.lengthComputable);在if语句之前。
@AddWeb- alert(xhr) 在 [object XMLHttpRequest] 之后打印
让我们continue this discussion in chat。
【参考方案1】：
你是上传文件异步的方式所以设置它为真。 这是您的解决方案代码：
JS 代码：
$(document).ready(function()
$(document.body).on('click', '#button1' ,function(e)
var formData = new FormData($("#multiple_upload_form")[0]);
$.ajax(
xhr: function ()
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt)
if (evt.lengthComputable)
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
$('.progress').css(
width: percentComplete * 100 + '%'
);
if (percentComplete === 1)
$('.progress').addClass('hide');
, true);
xhr.addEventListener("progress", function (evt)
if (evt.lengthComputable)
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
$('.progress').css(
width: percentComplete * 100 + '%'
);
, true);
return xhr;
,
type: 'POST',
url: "ajax_upload.php",
mimeType:"multipart/form-data",
data: formData,
async : true,
cache : false,
contentType : false,
processData:false,
success: function (data) alert("data"+data);
);
);
);
希望对您有所帮助！
【讨论】：
自定义 CSS webkit 滚动条在 Firefox 浏览器中不起作用
】自定义CSSwebkit滚动条在Firefox浏览器中不起作用【英文标题】：CustomCSSwebkitscrollbarisnotworkinginFirefoxbrwoser【发布时间】：2018-03-2312:09:09【问题描述】：这是我的小提琴：SCROLLBAR在Chrome和Firefox浏览器中运行fiddle，点击“切换”按钮... 查看详情
extjs 5 网格的滚动条在边框布局面板中不起作用
】extjs5网格的滚动条在边框布局面板中不起作用【英文标题】：extjs5grid\'sscrollbardoesnotworkinborderlayoutpanel【发布时间】：2014-12-2307:54:04【问题描述】：在边框布局面板中，即使grid的存储时间长到足以让grid溢出，grid的滚动条也不... 查看详情
Cordova Async XMLHttpRequest().open 在 Android 中不起作用
】CordovaAsyncXMLHttpRequest().open在Android中不起作用【英文标题】：CordovaAsyncXMLHttpRequest().opendoesnotworkinAndroid【发布时间】：2017-05-1513:28:23【问题描述】：我正在尝试通过GET请求向我的应用服务器提交表单。但是我发现这是不可能的。... 查看详情
像寻求拖动视频进度条这样的视频控件在 HTML 中不起作用？
】像寻求拖动视频进度条这样的视频控件在HTML中不起作用？【英文标题】：VideocontrolslikeseekdraggingvideoprogressbarisnotworkinginHTML?【发布时间】：2021-08-0400:12:11【问题描述】：像寻找10秒视频进度条拖动这样的视频控件在HTML中不起作... 查看详情
进度可见性在列表视图页脚中不起作用
】进度可见性在列表视图页脚中不起作用【英文标题】：Progressvisibilitynotworkinginlistviewfooter【发布时间】：2015-10-2112:57:52【问题描述】：我在列表视图中使用分页，当用户向下滚动到列表视图末尾时，我在列表视图页脚中显示进... 查看详情
UIProgressView 跟踪和进度图像在 iOS7 中不起作用
】UIProgressView跟踪和进度图像在iOS7中不起作用【英文标题】：UIProgressViewtrackandprogressimagesnotworkinginiOS7【发布时间】：2014-02-2311:26:57【问题描述】：我有一个自定义的UIProgressView，其中包含进度和跟踪图像。我还自定义了进度视图... 查看详情
自定义自动播放进度条 - 动态宽度属性 - 在铬中不起作用
】自定义自动播放进度条-动态宽度属性-在铬中不起作用【英文标题】：Customautoplayprogressbar-dynamicwidthproperty-doesn\'tworkinchromium【发布时间】：2020-03-1723:21:56【问题描述】：我有一个用于音频播放标签的自定义进度bur，它可以动态... 查看详情
XHR + 数据 URI 在 Safari 中不起作用
...Safari【发布时间】：2015-09-0408:51:49【问题描述】：我使用XMLHttpRequest使用此代码从数据URI生成Blob：functiondataUrlToBlob(dataUrl,callback)varxhr=newXMLHttpRequest;xhr.open(\'GET\',dataUrl);xhr 查看详情
注释 CrossOrigin 在 Spring Boot 中不起作用
...端点发出请求，但它一直给我CORS问题：在以下位置访问XMLHttpRequest\'localhost:9090/helios-a 查看详情
带有 Angular 的动态宽度在 IE11 中不起作用
...时间】：2015-12-0301:03:49【问题描述】：我有一个显示上传进度的进度条。CSS适用于chrome，但不适用于IE<divclass="progress-bar"><divstyle="width:media.progress*0. 查看详情
水平滚动条在 Firefox 上不起作用
】水平滚动条在Firefox上不起作用【英文标题】：Horizontalscrollbardoesn\'tworkonfirefox【发布时间】：2022-01-1806:51:13【问题描述】：<divstyle="margin:0auto;width:150px;height:100px;display:flex;overflow-x:scroll;overflow-y:hidden;"><selectmultip 查看详情
AlertDialog setmessage 在 Asynctask 中不起作用
...的代码，我试图通过onProgressUpdate方法在Asyntask中显示我的进度，但它没有显示在警报对话框中。仅显示初始消息。classDownloadFileFromURLexte 查看详情
片段隐藏在Android中不起作用
...个主要活动，我想在单独的片段中显示图像和文本而不是进度条。我有一个单独的片段，我想在用户单击MainActivity中的按钮时显示该片段。我的问题是，当我启动应用程序时，默认情况下会显示片段。我希望仅在用户单击按钮时... 查看详情
带有 XMLHttpRequest 的 CORS 不起作用
】带有XMLHttpRequest的CORS不起作用【英文标题】：CORSwithXMLHttpRequestnotworking【发布时间】：2014-10-0710:05:28【问题描述】：我正在尝试使用XMLHttpRequest读取音频流，但收到错误消息“XMLHttpRequestcannotload.No\'Access-Control-Allow-Origin\'headerispr... 查看详情
并行文件上传 XMLHttpRequest 请求以及为啥它们不起作用
】并行文件上传XMLHttpRequest请求以及为啥它们不起作用【英文标题】：ParallelfileuploadXMLHttpRequestrequestsandwhytheywon\'twork并行文件上传XMLHttpRequest请求以及为什么它们不起作用【发布时间】：2018-12-0113:16:20【问题描述】：我正在尝试... 查看详情
在 XMLHttpRequest() 之后 PHP 定义不起作用
】在XMLHttpRequest()之后PHP定义不起作用【英文标题】：PHPdefinenotworkingafterXMLHttpRequest()【发布时间】：2021-06-0417:53:59【问题描述】：我需要使用PHP常量变量保护文件，并且只能通过index.php访问文件。我需要通过XMLHttpRequest请求获取... 查看详情
用逗号结束 python 2.7 打印语句在 tmux 中不起作用吗？
...个缓慢的进程，并希望通过打印循环变量来记录for循环的进度。print\'Progress...\',foriinrange(15):...pr 查看详情
SVG 圆的样式在 Firefox 中不起作用，浏览器删除了半径属性
...1-0405:03:46【问题描述】：我正在尝试使用SVG和CSS创建一种进度环，目前它在Chrome中有效。但是，Firefox（61.0.1（64位））给我带来了问题，并且没有显示我的圈子。我已经尝 查看详情