正文 

当前位置： 首页 > 问答 >

文件上传：进度条完成百分比

     2023-02-24     169

关键词：

【中文标题】文件上传：进度条完成百分比【英文标题】：File uploads: Percentage completed progress bar 【发布时间】：2014-03-05 23:30:00 【问题描述】：

我正在尝试为BuddyPress 中的头像上传添加一个“到目前为止完成的百分比”进度条。目的是阻止用户在上传完成之前离开页面。

上传过程在 BuddyPress 中由 bp-core/bp-core-avatars.php 文件中的 bp_core_avatar_handle_upload() 处理。该函数首先使用bp_core_check_avatar_upload() 检查文件是否已正确上传。然后它会检查文件大小是否在限制范围内，以及它是否具有可接受的文件扩展名（jpg、gif、png）。如果一切顺利，则允许用户裁剪图像（使用Jcrop），然后将图像移动到其真实位置。

实际上传由WordPress函数wp_handle_upload处理。

如何创建“完成百分比”进度条并在文件上传时显示？

【问题讨论】：

【参考方案1】：

我不熟悉 BuddyPress，但所有上传处理程序（包括 android 概述的 HTML5 XHR 处理程序）都有一个可以绑定到的文件进度挂钩点。

我使用过uploadify、uploadifive 和swfupload，它们都可以与相同的进度函数处理程序进行交互，以获得相同的进度条结果。

// SWFUpload
$elem.bind('uploadProgress', function(event, file, bytesLoaded)  fnProgress(file, bytesLoaded); )

// Uploadify
$elem.uploadify( onUploadProgress: function (file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal)  fnProgress(file, bytesUploaded); );

// Uploadfive
$elem.uploadifive( onProgress: function(file, e)  fn.onProgress(file, e.loaded); );

Uploadifive 是一个基于 HTML5 的上传器，只需绑定到 XHR 'progress' 事件，因此所有这些属性都可用于任何 HTML5 上传器。

至于实际的进度条码..

HTML：

<div class='progressWrapper' style='float: left; width: 100%'>
    <div class='progress' style='float: left; width: 0%; color: red'></div>
    <div class='progressText' style='float: left;></div>
</div>

JS：

var fnProgress = function(file, bytes) 
    var percentage = (bytesLoaded / file.size) * 100;

    // Update DOM
    $('.progress').css( 'width': percentage + '%' );
    $('.progressText').html(Math.round(percentage + "%");

【讨论】：

【参考方案2】：

您应该使用 XHR 对象。如果它对你有帮助，我现在不知道，但我写了一个简单的 XHR 上传器。

HTML：

    <form id="uploader" enctype="multipart/form-data" action="uploadimage.php" method="post">
        <input type="file" id="file" name="file[]" multiple="multiple" accept="image/jpeg" /><br/>
        <input type="submit" value="Upload" />
        <div class="list" style="background-color:#000;color:#FFF;padding:5px;display:none;border-radius:5px;">
        </div>
    </form>

JS：

$("#uploader").submit(function()
    $('#uploader .list').fadeIn(100).css("width","0px");
    var data = new FormData();
    // if you want to append any other data: data.append("ID","");
    $.each($('#file')[0].files, function(i, file) 
        data.append('file-'+i, file);
    );
    $.ajax(
        url: 'uploadimage.php',
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        xhr: function()   // custom xhr
            myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload) // check if upload property exists
                myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
            
            return myXhr;
        ,
        success: function(data2)
            $('#uploader .list').css(
                "width":"200px",
                "text-align":"center",
                "margin":"10px 0 10px 0"
            ).html("DONE!").delay(2000).fadeOut(500);
            if (data2 == "ERROR_FILESIZE")
                return alert("Choose another file");
            
                            else /*change location*/ 
        );
    return false;
);

在这种情况下，我使用uploadimage.php 上传了文件，如果它打印：“ERROR_FILESIZE”，那么它会提示错误。

【讨论】：

【参考方案3】：

我认为，在您担心客户端的事情之前，您应该了解服务器端的要求才能真正做到这一点。

对于 PHP，您需要启用 session.upload_progress，除非 wp_handle_upload() 函数使用不同的东西，所以我在这里只是猜测，但他们可能确实使用常规 PHP 会话的东西因此需要启用它。

如果您查看给定链接的 cmets，许多用户表示进度状态在某些环境下不起作用，例如 FastCGI 上的 PHP，这是您在大多数时间在共享托管环境中会得到的。

现在这里很多人告诉你使用 XHR 上传器，但问题是他们给你一个自定义 upload.php 脚本的例子或类似的东西来发送数据，但你使用的是一个 wordpress 插件你无法控制（有点）

因此，考虑到 wp_handle_upload() 实际上并不能以 AJAX 方式工作，那么您必须在单击文件上传表单提交按钮时挂钩一个事件，并在 JS 中设置一个计时器，该计时器调用您传递表单的某个 URL ID 之类的数据，然后使用该 ID 查询会话以检查文件的进度：

 $_SESSION["upload_id"]["content_length"]
 $_SESSION["upload_id"]["bytes_processed"]

使用该数据，您可以计算已转移了多少。您可以将 JS 计时器设置为每秒调用一次，但如果它们上传的文件不是很大（例如，大于 1mb）并且它们具有良好的连接，那么将不会通知太多进度。

查看this link，了解如何使用此会话上传数据的分步示例。

【讨论】：

【参考方案4】：

您需要注入进度条。

我认为唯一的方法是使用过滤器挂钩 apply_filters( 'bp_core_pre_avatar_handle_upload' 等) 覆盖函数 bp_core_avatar_handle_upload

您最终会复制大部分功能，但您应该能够添加进度条代码。

如果你得到这个工作，你应该把它作为增强票提交；这是个好主意。

【讨论】：

嗨，shanebp - 我正在考虑按照这些思路做点什么。然而，正是代码生成了一个让我苦苦挣扎的进度条。我已经编辑了我的问题。有什么想法可以做到吗？我正在为此苦苦挣扎:( 呵呵未拍！我实际上并没有 - 试图自己做 - 但现在看到有可用的脚本！有什么建议吗？ johnboy.com/php-upload-progress-bar 看起来很简单 我注意到，对于大多数 PHP 解决方案，您必须在服务器上安装 APC - 我不能保证在我安装它的每个站点上都有。 不再是这种情况了，请参阅php.net/manual/en/session.upload-progress.php （尽管这又需要 PHP not 通过 FastCGI 运行 - 但你不能一直取悦所有人.)

使用 jQuery 的文件上传进度条

...么方法可以计算已经上传了多少，以便我可以计算上传的百分比并创建进度条？【问题讨论】：你看过jQuery插件或 查看详情

asp.net上传大文件带进度条swfupload

Asp.Net基于swfupload上传大文件带进度条百分比显示，漂亮大气上档次，大文件无压力，先看效果一、上传效果图1、上传前界面：图片不喜欢可以自己换2、上传中界面：百分比显示 3、上传后返回文件地址，我测试呢所以乱写... 查看详情

python中怎么创建一个显示移动文件的完成情况的百分比或者进度条？

参考技术A用tqdm模块本回答被提问者采纳 查看详情

如何在 Alamofire 4.0 中添加带有上传进度百分比的标签的进度条

】如何在Alamofire4.0中添加带有上传进度百分比的标签的进度条【英文标题】：HowIcanaddprogressbarwithlabelwithpercentageofprogressofuploadinAlamofire4.0【发布时间】：2016-12-3112:01:18【问题描述】：我正在尝试通过Alamofire4.0将视频上传到服务器... 查看详情

如何在springmvc里加入监听器，来监听文件上传进度条

...小然后用这个大小除以上传文件的本来size才能得出一个百分比。本回答被提问者和网友采纳 参考技术B这个东西貌似flash有个控件做的不错而且支持多文件上传swfupload你百度一下很好用的里面进度条什么的东西都有 查看详情

进度条无规律地移动

...】：我正在使用进度条来显示上传到ftpserver的文件的上传百分比，这是它第一次很好地更新，当我取消上传并再次启动时。50%的上传进度条正在填充，第三次为25%的总进度条正在填充。这里是代码（我使用s7ftp类上传到服务器）-... 查看详情

java上传实现百分比的进度条，怎么实现

java上传实现百分比的进度条，怎么实现，谁能给个demo参考技术A这个你完全可以参考jQueryUI里面的http://www.jeasyui.com/demo/main/index.php点击demo----ProgressBar那里面完全就是一个进度条，你试试。追问哦，才注意到你给的是easyui，我看的... 查看详情

通过后处理上传进度

...【问题描述】：我有一个上传表单，用户可以在其中上传文件。上传完成后，对文件进行后处理，有时上传完成后处理需要10-15秒。上传完成后，进度条为100%，但如何检测文件何时完成，因此您可以在文件处理时向用户显示“请... 查看详情

用户的 SharpBox 进度条

...间向用户显示进度条。我可以通过下面的方法在后端获取百分比，但是我无法打印e.PercentageProgress返回的百分比以显示给用户。staticvoidUploadDownloadProgress(Objectsender,FileDataTrans 查看详情

将图像上传到 Firebase 存储时如何制作进度条？

...何在vuejs中制作进度条我正在使用这个firebase代码来显示百分比我使用v-model和p标签 查看详情

圆形百分比进度条

】圆形百分比进度条【英文标题】：Circularpercentprogressbar【发布时间】：2015-06-0317:19:38【问题描述】：我想在我的网站上有一个百分比圆圈指示器：在这种情况下，它显示75%。这应该怎么做？我在图像文件中有黄色圆圈，但如果... 查看详情

在vuex中带进度条的FIie上传

...18:19【问题描述】：我无法从VueX操作文件中获取组件中的百分比。它不像反应式我用这篇文章作为指导https://serversideup.net/file-upload-progress-indicator-with-axios-and-vuejs/但仍然无法得到结果。Vue组件& 查看详情

winform用http上传文件或下载文件进度条如何实现

...eLine("Sending0bytes,1%...",sent,percent);//获得文件发送的百分比publicstringGetPercent(intsent)decimalallBytes=Convert.ToDecimal(fileBytes);decimalcurrentSent=Convert.ToDecimal 查看详情

使用 Java 上传文件（带进度条）

】使用Java上传文件（带进度条）【英文标题】：FileUploadwithJava(withprogressbar)【发布时间】：2010-09-2006:17:55【问题描述】：我对Java非常陌生，而且我主要是边学边自学，所以我开始构建一个小程序。我想做一个可以从本地磁盘中... 查看详情

Ajax表单上传进度条

...的HTML4表单上传，而不是新的HTML5API）。进度实际上跟踪文件移动后正在完成的其他工作。它的设计方式是流保持打开状态，直到完成额外的工作，然后服务器端方法最终返回，从而关闭流。我遇到了一些特定于Chrome的问题。我... 查看详情

下载文件时进度条不显示剩余百分比？

】下载文件时进度条不显示剩余百分比？【英文标题】：progressbarnotshowremainingbypercentwhendownloadfile?【发布时间】：2021-10-2819:28:21【问题描述】：我在Angular8上工作，我遇到问题进度条不显示部分下载假设我下载数据然后20%然后40%... 查看详情

如何在ajax调用中获取文件上传进度状态？

】如何在ajax调用中获取文件上传进度状态？【英文标题】：Howtogetthefileuploadingprogressstatusinajaxcall?【发布时间】：2020-04-0408:36:44【问题描述】：我正在通过ajax上传多个文件，我需要在其中保留一个进度条。只有在所有过程完成后... 查看详情

[layui]上传文件带进度条+表单提交功能优化(代码片段)

上传文件带进度条+表单提交功能优化前期做了一个简视频提交；每次只提交一个需要重新上传。视频文件较大时候没有进度提示，用户体验并不好，今天做一个简单的优化！如果监听提交表单时候，回调路径可能还未完成。提... 查看详情