关键词：
【中文标题】如何在ajax调用中获取文件上传进度状态？【英文标题】：How to get the file uploading progress status in ajax call? 【发布时间】：2020-04-04 08:36:44 【问题描述】：我正在通过 ajax 上传多个文件，我需要在其中保留一个进度条。只有在所有过程完成后我才能获得进度完成状态，所以我需要在上传过程中保持进度条显示状态。
在这里，当我单击“btnEditImageSave”按钮时，我正在检查现有文件是否在 if 条件下被删除和上传。 在那里存储上传文件并将其传递给ajax完整功能中的上传过程。在其中我包含了进度条码以显示进度状态，但仅在所有过程完成后才显示。
$('#btnEditImageSave').unbind().click(function (event)
$('#progressBardiv').css('width', '0');
$('.progressBardiv').text('');
if (uploadedfiles.length > 0 && deleteFiles.length == 0)
if (editStoredFiles.length > 0)
var files = new FormData();
for (var i = 0; i < editStoredFiles.length; i++)
if (editStoredFiles[i].size > 0)
files.append(editStoredFiles[i].name, editStoredFiles[i]);
uploadedfiles = [];
files.append('SerialNumber', editSerialNumber);
$.ajax(
type: "POST",
url: productionBaseUrl + '/Home/UploadDockingStationFiles',
data: files,
contentType: false,
processData: false,
async: true,
complete: function ()
uploadedfiles = [];
$('#editfileupload').val();
$.ajax(
type: "POST",
url: cloudServerUrl + "/api/dockstation/updatefiledisplaytimer",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify(
SerialNumber: $('#ddlEditDockingStationSerialNumber').val(),
FileSpinTimer: $('#txtEditTimer').val(),
IsHDMIUpdate: isHDMIUpdate
),
/*----My Progress Bar code----*/
xhr: function ()
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function (event)
if (event.lengthComputable)
var percentComplete = event.loaded / event.total;
percentComplete = parseInt(percentComplete * 100);
$('#progressBardiv').text(percentComplete + '%');
$('#progressBardiv').css('width', percentComplete + '%');
, false);
return xhr;
,
complete: function ()
$('#loading-popup').hide();
$('#divEditDockingStationImages').dialog("close");
$.popup('<pre>Message</pre>', "Image Configuration Updated Successfully.", 'OK');
return false;
);
);
else
$('#loading-popup').hide();
$.popup('<pre>Message</pre>', "Please Select a File.", 'OK');
return false;
<div class="progress">
<div id="progressBardiv" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="">
<span class="sr-only"></span>
</div>
</div>
【问题讨论】：
【参考方案1】：您可以使用plUpload插件上传文件..
点击此链接：https://www.plupload.com/docs 它有自己的进度条事件...
请看下面的示例代码...
var uploader = new plupload.Uploader(
runtimes: 'html5,flash,silverlight,html4',
browse_button: 'pickfiles', // you can pass in id...
container: document.getElementById('container'), // ... or DOM Element itself
url: "//",
filters:
max_file_size: '500mb',
mime_types: [
title: "PDF files", extensions: "pdf"
]
,
flash_swf_url: '/plupload/js/Moxie.swf', // Flash settings
silverlight_xap_url: '/plupload/js/Moxie.xap', // Silverlight settings
init:
PostInit: function ()
// whereas filelist is the divid which contains uploaded file names....
document.getElementById('filelist').innerHTML = '';
uploader.start();
,
FilesAdded: function (up, files)
plupload.each(files, function (file)
document.getElementById('filelist').innerHTML +=
'<div id ="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) +
') <b></b> <a href ="" class="remove text-danger pull-right">Remove</a></div>' +
'<div class="progressbar" id ="progressBar_' + file.id + '"> <div class="mybar" id="myBar' + file.id + '"></div></div>';
);
,
UploadProgress: function (up, file)
var $progressId = $("#filelist div#progressBar_" + file.id + " div.mybar");
$progressId.css('width', file.percent + '%');
//To Remove 'Remove Link' while file is in uploading state.
$("#filelist div#" + file.id).find('a.remove').remove();
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
,
FileUploaded: function (up, file, ServerResponse)
var response = JSON.parse(ServerResponse.response);
,
UploadComplete: function (up, file)
,
Error: function (up, err)
document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
);
uploader.init();
我在我的项目中使用过，看看下面的快照，
【讨论】：
谢谢。我已经找到解决办法了，刚刚在beforeSend中完成了进度条功能，它工作正常！！【参考方案2】： if (deleteFiles.length > 0 && uploadedfiles.length > 0)
$.ajax(
type: "POST",
url: productionBaseUrl + "/Home/DeleteDockingStationFiles",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
data: JSON.stringify(
serialNumber: editSerialNumber,
files: deleteFiles
),
complete: function ()
deleteFiles = [];
if (editStoredFiles.length > 0)
var files = new FormData();
for (var i = 0; i < editStoredFiles.length; i++)
if (editStoredFiles[i].size > 0)
files.append(editStoredFiles[i].name, editStoredFiles[i]);
uploadedfiles = [];
files.append('SerialNumber', editSerialNumber);
$.ajax(
type: "POST",
url: productionBaseUrl + '/Home/UploadDockingStationFiles',
data: files,
contentType: false,
processData: false,
async: true,
xhr: function (data)
var xhr = new window.XMLHttpRequest(data);
xhr.upload.addEventListener("progress", function (event)
if (event.lengthComputable)
var percentComplete = event.loaded / event.total;
percentComplete = parseInt(percentComplete * 100);
$('#progressBardiv').text(percentComplete + '%');
$('#progressBardiv').css('width', percentComplete + '%');
, false);
return xhr;
,
beforeSend: function ()
uploadedfiles = [];
$('#editfileupload').val();
$.ajax(
type: "POST",
url: cloudServerUrl + "/api/dockstation/updatefiledisplaytimer",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify(
SerialNumber: $('#ddlEditDockingStationSerialNumber').val(),
FileSpinTimer: $('#txtEditTimer').val(),
IsHDMIUpdate: isHDMIUpdate
),
complete: function ()
$('#loading-popup').hide();
$('#divEditDockingStationImages').dialog("close");
$.popup('<pre>Message</pre>', "Image Configuration Updated Successfully.", 'OK');
return false;
);
);
);
【讨论】：
如何在ajax文件上传中显示进度条
】如何在ajax文件上传中显示进度条【英文标题】：Howtoshowprogressbarinajaxfileupload【发布时间】：2013-01-2605:22:52【问题描述】：我的代码发布了ajax请求，但没有显示进度条。请帮助更正代码以显示工作进度条。$(document).ready(function()... 查看详情
在没有 AJAX 的情况下获取文件上传状态
】在没有AJAX的情况下获取文件上传状态【英文标题】：GettingfileuploadstatuswithoutAJAX【发布时间】：2011-11-0817:51:05【问题描述】：在我看来，如果信息已经通过浏览器输出给用户，它应该可以通过javascript以某种方式在DOM中访问。当... 查看详情
如何将 curl 上传进度发送到要显示的 ajax
】如何将curl上传进度发送到要显示的ajax【英文标题】：Howtosendcurluploadprogresstoajaxtobedisplayed【发布时间】：2016-03-2216:47:47【问题描述】：我要做的是使用ajax将文件/文件信息上传到upload.php，然后通过curl将相同的信息再次上传到... 查看详情
在javascript-ajax中提交表单时如何显示进度条
】在javascript-ajax中提交表单时如何显示进度条【英文标题】：Howtoshowtheprogressbarwhensubmittingtheforminjavascript-ajax【发布时间】：2021-06-1819:18:10【问题描述】：我已经做了进度条和一切。但是当我选择文件上传时出现问题，这意味着... 查看详情
使用 ajax 获取通过 FTP 上传的文件的文件大小 - 试图防止 ajax 中断自身
...间】：2015-03-3022:56:10【问题描述】：我正在尝试使用ajax调用检查FTP上传的文件的进度，该调用重复回显bat文件的输出，该文件在上传时检查文件的 查看详情
中止多文件上传 AJAX 请求
】中止多文件上传AJAX请求【英文标题】：AbortamultiplefileuploadAJAXrequest【发布时间】：2015-01-0222:44:45【问题描述】：我正在尝试使用进度条中止多文件上传，显示过程状态。我想要实现的是在中止按钮单击时完全中止多个文件上传... 查看详情
如何在使用 Reflux 的商店中使用 AJAX 获取初始状态
】如何在使用Reflux的商店中使用AJAX获取初始状态【英文标题】：HowtogetinitialstatewithAJAXinaStorewithReflux【发布时间】：2015-07-2414:38:44【问题描述】：最近我一直在研究React和Reflux。我被卡住的部分是我无法在Reflux的商店中使用AJAX获... 查看详情
jQuery 上传进度和 AJAX 文件上传
...一个文件（使用AJAX），我需要使用NginxHttpUploadProgressModule获取文件的上传进度。我需要一个好的解决方案来解决这个问题。我已经尝试使用jquery.uploadprogress 查看详情
jQuery 上传进度和 AJAX 文件上传
...一个文件（使用AJAX），我需要使用NginxHttpUploadProgressModule获取文件的上传进度。我需要一个好的解决方案来解决这个问题。我曾尝试使用jquery.uploadprogress插 查看详情
jQuery 上传进度和 AJAX 文件上传
...一个文件（使用AJAX），我需要使用NginxHttpUploadProgressModule获取文件的上传进度。我需要一个好的解决方案来解决这个问题。我曾尝试使用jquery.uploadprogress插 查看详情
jQuery 上传进度和 AJAX 文件上传
...一个文件（使用AJAX），我需要使用NginxHttpUploadProgressModule获取文件的上传进度。我需要一个好的解决方案来解决这个问题。我曾尝试使用jquery.uploadprogress插 查看详情
jQuery 上传进度和 AJAX 文件上传
...一个文件（使用AJAX），我需要使用NginxHttpUploadProgressModule获取文件的上传进度。我需要一个好的解决方案来解决这个问题。我曾尝试使用jquery.uploadprogress插 查看详情
jQuery 上传进度和 AJAX 文件上传
...一个文件（使用AJAX），我需要使用NginxHttpUploadProgressModule获取文件的上传进度。我需要一个好的解决方案来解决这个问题。我曾尝试使用jquery.uploadprogress插 查看详情
如何在 AJAX 成功函数中调用 element.onload？
】如何在AJAX成功函数中调用element.onload？【英文标题】：Howtocallelement.onloadinsideAJAXsucessfunction?【发布时间】：2017-08-2515:07:04【问题描述】：我在phpcodeignitor中使用AJAX上传图片，上传时返回包含上传图片路径的JSON响应，然后我将... 查看详情
如何从 Django 中的 ajax 调用中读取文件？
】如何从Django中的ajax调用中读取文件？【英文标题】：HowcanIreadafilefromajaxcallinDjango?【发布时间】：2021-11-2222:37:11【问题描述】：我在Django中工作。我需要上传一个txt文件并将其内容打印在表格中。我尝试了很多东西，但没有一... 查看详情
如何从 XMLHttpRequest 获取进度
】如何从XMLHttpRequest获取进度【英文标题】：HowtogetprogressfromXMLHttpRequest【发布时间】：2010-09-0918:29:45【问题描述】：是否可以获得XMLHttpRequest的进度（上传的字节数，下载的字节数）？这对于在用户上传大文件时显示进度条很有... 查看详情
当 extjs 中有代理 ajax 调用时，如何从响应中获取内容类型？
】当extjs中有代理ajax调用时，如何从响应中获取内容类型？【英文标题】：HowcanIgetcontenttypefromresponsewhenthereisaproxyajaxcallinextjs?【发布时间】：2020-09-0609:31:42【问题描述】：在下面的代码中，我对服务器进行了代理ajax调用。当会... 查看详情
在 PHP 中创建文件进度条
...和临时位置）存储在会话中。同时，每隔10秒启动一次AJAX调用，以检查文件的大小与会话中存储的大小相比。这会将 查看详情