图片上传的简单进度“栏” - 立即达到 100% [重复]

关键词：

【中文标题】图片上传的简单进度“栏” - 立即达到 100% [重复]【英文标题】：simple progress 'bar' for image upload -- immediately at 100% [duplicate] 【发布时间】：2015-10-23 14:03:58 【问题描述】：

我正在尝试在我的 PHP 图像上传中添加一个简单的进度条/数字。如果启用了javascript，这个脚本应该可以工作，但现在，它立即显示100%，在所有内容上传之前，然后显示“正在处理图像”，我认为也为时过早。

一定有问题：

$('form#uploadform').submit(function()
var formdata = $('form#uploadform').serialize();
$('p.isloading').show();

$.ajax(
xhr: function () 
    var xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener("progress", function (evt) 
        if (evt.lengthComputable) 
            var percentComplete = evt.loaded / evt.total;
            $('#uploadprogress').text(percentComplete * 100 + '%');
        
    , false);
    xhr.addEventListener("progress", function (evt) 
        if (evt.lengthComputable) 
            var percentComplete = evt.loaded / evt.total;
            $('#uploadprogress').text(percentComplete * 100 + '%');
        
    , false);
    return xhr;
,
type: 'POST',
url: "/upload",
data: formdata,
success: function (data)  $('#uploadprogress').text('images are being processed'); 
);
//return false;
);

我想要一个简单的方法来显示已经上传了多少，但似乎我做错了。任何帮助表示赞赏。

【问题讨论】：

你好，这个插件可以为你使用完整的。 malsup.com/jquery/form/#file-upload 在小提琴上显示一个工作示例？ 如果我没记错的话，服务器需要一个模块才能工作。 我正在使用该插件。 【参考方案1】：

这个答案在@Amarnadh Meda 提供的链接上。

JavaScript -

$(function() 

var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('form').ajaxForm(
    beforeSend: function() 
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal);
        percent.html(percentVal);
    ,
    uploadProgress: function(event, position, total, percentComplete) 
        var percentVal = percentComplete + '%';
        bar.width(percentVal);
        percent.html(percentVal);
    ,
    complete: function(xhr) 
        status.html(xhr.responseText);
    
);
); 

HTML -

<form action="file-echo2.php" method="post" enctype="multipart/form-data">
    <input type="file" name="myfile"><br>
    <input type="submit" value="Upload File to Server">
</form>

<div class="progress">
    <div class="bar"></div >
    <div class="percent">0%</div >
</div>

<div id="status"></div>

编辑#1：

在这里找到了类似的问题。 File upload progress bar with jQuery

【讨论】：

小程序uploadfile引发的bug

参考技术A开发图片上传功能时，上传进度为100%，但是点击上传按钮时，提示【上传图片不存在】。使用wx.uploadFile接口时，上传进度uploadTask返回的progress=100%，并不意味着wx.uploadFile立马进入success回调中，中间过程存在时间差（... 查看详情

在 QProgressBar 中显示进度

】在QProgressBar中显示进度【英文标题】：DisplayprogressinQProgressBar【发布时间】：2019-02-2610:43:24【问题描述】：我正在使用QProgress来显示读取配置文件的状态。我有一个类向主窗口发出信号以显示状态。目前，我可以显示状态，但... 查看详情

基于jquery插件uploadify实现实时显示进度条上传图片

...主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料，感兴趣的小伙伴们可以参考一下先了解了解Uploadify，具体内容如下Uploadify是一个简单易用的多文件上传方案。作为一个Jquery插件，Uploadify使用简单，并具... 查看详情

AFNetworking 显示上传进度

...一行并进入详细视图。在详细视图中，用户可以上传五张图片。如果用户上传一张图片，上传进度视图将显示在详细视图的顶部。相当简单。:)现在问题来了：假设用户返回tableVi 查看详情

NSURLSession，上传任务 - 获取传输的实际字节

...收到错误报告，说我的iOS应用程序在慢速连接时无法上传图片。虽然我的超时时间可能不够高，但还有另一个问题。我发现上传进度很快就达到了100%，尽管我可以在Charles中看到仍在传输字节。我使用下面的NSU 查看详情

MVC 文件上传的引导进度条

】MVC文件上传的引导进度条【英文标题】：BootstrapProgressBarforMVCFileUpload【发布时间】：2014-08-2402:38:06【问题描述】：有没有一种简单的方法可以在文件加载时显示阻塞的Bootstrap进度条？上传文件时，进度会显示在chrome的状态栏中... 查看详情

Swift Progress View 动画使进度条超过 100%

...此代码，它会将100%添加到当前栏并使其运行通过酒吧。图片应该更合乎逻辑地解释这 查看详情

进度条，最大值并重置为 100%

】进度条，最大值并重置为100%【英文标题】：Progressbar,maxandreseton100%【发布时间】：2017-11-2813:47:47【问题描述】：我正在处理连接到sql中的XP和MAXXP的进度条。每次单击按钮时，您都会获得1xp，最大xp为10。我希望当用户达到100%XP... 查看详情

uploadifive.js怎么去掉进度条

参考技术AUploadify中上传完毕会默认保留进度条并显示100%，前提设置removeCompleted为false，而UploadiFive中上传完毕后进度条自动消失 参考技术BUploadify中上传完毕会默认保留进度条并显示100%，前提设置removeCompleted为false，而UploadiFive... 查看详情

通过后处理上传进度

】通过后处理上传进度【英文标题】：uploadprogresswithpostprocessing【发布时间】：2015-02-2517:24:30【问题描述】：我有一个上传表单，用户可以在其中上传文件。上传完成后，对文件进行后处理，有时上传完成后处理需要10-15秒。上... 查看详情

多个图像上传进度问题

...我在它工作时上传它们1。但是，一旦我尝试上传下一张图片或多张图片，问题就开始了。我在一个系列中上传的每张图片都会随着最新上传的图片的进度更新所有图片。当我在最后一张上传完成之前拍摄了多张图片时，它会通... 查看详情

AngularJS - 进度条为 100% 后重新加载页面 5 秒

】AngularJS-进度条为100%后重新加载页面5秒【英文标题】：AngularJS-Reloadpage5secondsonceprogressbaris100%【发布时间】：2019-10-1801:38:26【问题描述】：我想在进度条达到100%后5秒后重新加载页面我的代码是：<!DOCTYPEHTML><!--/**jQueryFileUp... 查看详情

进度回顾

...户代码/用户名/等级/积分/粉丝数和加分数/自媒体列表2、图片上传功能，mobile下参考了几个例子都不理想3、发帖和回帖功能4、Icon和图片优化5、网站静态化6、签到功能，看似简单，有点头痛7、消息列表处理8、最头痛的是推广... 查看详情

如何让电脑cpu使用率达到百分百

...如何确定自己电脑的CPU使用率达到了100%呢？这个问题很简单，直接右键单击任务栏空白处，选择“启动任务管理器”，切换到“性能”标签，就会看到CPU使用率CPU使用率就是电脑运行的程序占用的CPU资源，表示机器在某个时间... 查看详情

使用swfupload上传超过30m文件，使用flash上传组件

原文:使用swfupload上传超过30M文件，使用FLASH上传组件 前一段时间会员的上传组件改用FLASH的swfupload来上传，既能很友好的显示上传进度，又能完全满足大文件的上传。后来服务器升级到windows2008,改为IIS7后，上传文件一旦超过... 查看详情

Blueimp 上传插件进度条错误

】Blueimp上传插件进度条错误【英文标题】：Blueimpuploadpluginprogressbarerror【发布时间】：2013-05-2911:54:19【问题描述】：我有一个使用blueimp上传插件上传文件的表单。上传过程正常。我想要的只是在上传事件中添加一个进度条。我... 查看详情

使用引导进度条以模态显示上传进度

】使用引导进度条以模态显示上传进度【英文标题】：DisplayUploadProgressinModalwithBootstrapProgressBar【发布时间】：2015-04-2003:01:02【问题描述】：我正在构建一个c#MVC应用程序，它显示一个表单并允许用户上传一些文件。当用户点击提... 查看详情

discuz图片上传到100%后自动取消

discuz图片上传到100%后自动取消去服务器里看，图片已经上传但是传上去自动变成取消上传数据库表数据有问题或表结构有问题测试如下：1、同样的源程序代码，链接2个不同的数据库，一个不会出现问题，一个会出现问题2、同... 查看详情