Php 上载带有后期处理的进度_Php_Jquery_Css_Html

Php 上载带有后期处理的进度

php jquery css html

Php 上载带有后期处理的进度,php,jquery,css,html,Php,Jquery,Css,Html,我有一个上传表单，用户可以上传文件。上传完成后，将对文件进行后处理，有时在上传完成后处理时间长达10-15秒上传完成后，进度条为100%，但如何检测文件何时完成，以便在处理文件时向用户显示“请稍候”标志。。用户可能认为浏览器已冻结og崩溃，因为进度条为100%，但什么也没有发生最好使用纯HTML5+javascript的客户端解决方案，但不是必须的：）为此，我使用了一个自定义上传小部件。在服务器端，当客户端请求更新时，我向客户端发送以下信息：收到的文件百分比加上状态消息。通过该消息，我可以提

我有一个上传表单，用户可以上传文件。上传完成后，将对文件进行后处理，有时在上传完成后处理时间长达10-15秒

上传完成后，进度条为100%，但如何检测文件何时完成，以便在处理文件时向用户显示“请稍候”标志。。用户可能认为浏览器已冻结og崩溃，因为进度条为100%，但什么也没有发生

最好使用纯HTML5+javascript的客户端解决方案，但不是必须的：）

为此，我使用了一个自定义上传小部件。在服务器端，当客户端请求更新时，我向客户端发送以下信息：收到的文件百分比加上状态消息。通过该消息，我可以提供额外的反馈，如正在进行后期处理的哪个步骤或显示错误。

因为您有进度条来显示表单流程以添加更多细节，而在处理过程中，您可以添加如下图所示的图像
它将向用户显示您的表单仍在处理中

这可能有助于用户-浏览器尚未冻结。
请尝试
html

js

var len=arr.length//文件长度，start=0//更新进度，outputs=$（“output[for=progress]”//通知，进度=$（“进度”），results=$（“#results”）//后处理 //gif旋转器，微调器=$（“正在处理响应，请稍候…”） .下一步（输出等式（1）） .html（微调器）；返回数据 }) }; 请求（） .then（功能（数据）{ //做上传后处理的事情 var进程=函数（）{ var dfd=新的$.Deferred（）； //处理。。。 t=设置超时（函数（）{ data.forEach（函数（res）{ 结果.append( $("", { “html”：$（“”）{ “html”：res.value }) })) }); if（results.find（“tr”）.length==len）{ 解析（“完成！”） } }，1+Math.floor（Math.random（）*15000））；返回dfd.promise（） }; //完成所有后期处理后再做一些事情进程（）。然后（函数（完成）{ outputs.eq（0）.empty（） .下一步（输出等式（1）） .html（完整）；清除超时（t）； t=零； }) });

JSFIDLE
我正在使用一个名为pekeupload的jquery插件它体积小，易于实现和定制

我希望这对你有帮助
最佳
Javascript

function initialize_progress(element) { //initializations! $(element).hide(); $(element).find('.progress-bar').prop('style','width: 0'); } function getProgress(process_id){ var re=new RegExp(process_id+"=[^;]+", "i") //construct RE to search for target name/value pair if (document.cookie.match(re)) //if cookie found return document.cookie.match(re)[0].split("=")[1] //return its value return null } function updateProgress(process_id, element){ var percentage, message, name, failed; $(element).show(); var myIntervalID = setInterval(function() { percentage = getProgress(process_id+"_percentage"); name = getProgress(process_id+"_process_name"); message = getProgress(process_id+"_message"); failed = getProgress(process_id+"_process_failed"); if(percentage) $(element).find('.progress-bar').css('width',percentage+'%').html(percentage+"% "+message); },2000); } //initialize progress bar //initialize_progress(".progress"); $(".upload-button").click(function() { //set listener updateProgress('upload_the_pix', ".progress") var request = $.get( "http://example.com/?progress", function(data) { alert(data); }) .done(function() { alert( "second success" ) }).fail(function() { alert( "error" ); }).always(function() { alert( "finished" ); }); });
HTML
单击按钮时服务器端的用法

if（isset（$\u GET['progress']））{ ProcessProgress:：设置（数组）( '进程id'=>'上载\u pix'， “进程名称”=>“图片上传”， )); ProcessProgress:：setProgress（0，“正在初始化”）；对于（$count=0；$count<10001；$count++）{ 交换机（$count）{ 案例1000： ProcessProgress:：setProgress（10，“应对文件”）；打破案例2000： ProcessProgress:：setProgress（20，“设置电子邮件”）；打破案例3000： ProcessProgress:：setProgress（30，“查找内容”）；打破案例4000： ProcessProgress:：setProgress（40，‘挤奶’）；打破案例5000： ProcessProgress:：setProgress（50，“同步联系人”）；打破案例6000： ProcessProgress:：setProgress（60，“更新Facebook个人资料”）；打破案例7000： ProcessProgress:：setProgress（70，‘打电话给你的女朋友’）；打破案例8000： ProcessProgress:：setProgress（80，‘编造’）；打破案例9000： ProcessProgress:：setProgress（90，“喂狗”）；打破案例10000： ProcessProgress:：setProgress（100，'Done.congreats'）；打破 } }

}
无论采用何种服务器/客户端技术，您都可以朝两个方向发展：
1.首先是线性处理（这是您当前的方式）当您将服务器上的文件从temp发送回显给用户，如“文件已成功上载。正在处理…”或仅在JS中，您可以在不显示任何服务器信息的情况下显示upload finish事件的消息，或进行另一个ajax调用以检查…，真的，有很多类似的方法。。关键是，在上传服务器继续文件处理（例如OCR 30页刚刚上传的PDF或其他内容）之后，用户必须等待服务器完成处理。这是因为如果很少有用户同时上传文件，那么所有的事情都会在同一时间被处理，你的服务器会100%快速运行…所以这让我想到
2.使用作业/消息队列上传文档后，将文件作业放入队列中，并通知用户在处理完成后（类似于将文档上载到ISSU时），您将向他发送邮件（或以任何方式通知用户）。通过这种方式，上传文件（可能在另一台机器上；）的处理会一个接一个地完成，用户无需等待文件处理完成。。。这是首选的方式
对于作业/消息队列，您可以使用：

,

别的

两者都适用于Java、.NET、Ruby、Python、PHP、Perl、C/C++、Erlang、Node.js等等

祝你好运：）
也许是第二个进度条，用于后期处理？如果你想控制上传的所有方面，比如你想知道上传了多少、要上传多少等，你可以看看。这个js库甚至允许您恢复上传。这将为您提供对上传的完全控制。但是有一个小问题，您也需要在后端进行一些配置。上传后，您可以使用ajax进行轮询，也可以使用node.js显示实时进度
var len = arr.length // file length , start = 0 // update progress , outputs = $("output[for=progress]") // notifications , progress = $("progress") , results = $("#results") // post processing // gif spinner , spinner = $("<img />", { "src": "data:image/gif;charset=binary;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" }); // upload file var request = function () { progress.prop("max", len); s = setInterval(function () { progress.prop("value", ++start); outputs.eq(0) .text("uploading file...") }, 1) return $.post("/echo/json/", { json: JSON.stringify(arr) }) .then(function (data) { clearInterval(s) s = null; progress.prop("value", len); outputs.eq(0) .html("upload complete ! <br />processing response, please wait...") .next(outputs.eq(1)) .html(spinner); return data }) }; request() .then(function (data) { // do post upload processing stuff var process = function() { var dfd = new $.Deferred(); // processing... t = setTimeout(function () { data.forEach(function (res) { results.append( $("<tr />", { "html": $("<td />", { "html": res.value }) })) }); if (results.find("tr").length === len) { dfd.resolve("complete !") } }, 1 + Math.floor(Math.random() * 15000)); return dfd.promise() }; // do stuff when all post processing complete process().then(function(complete) { outputs.eq(0).empty() .next(outputs.eq(1)) .html(complete); clearTimeout(t); t = null; }) });

function initialize_progress(element) { //initializations! $(element).hide(); $(element).find('.progress-bar').prop('style','width: 0'); } function getProgress(process_id){ var re=new RegExp(process_id+"=[^;]+", "i") //construct RE to search for target name/value pair if (document.cookie.match(re)) //if cookie found return document.cookie.match(re)[0].split("=")[1] //return its value return null } function updateProgress(process_id, element){ var percentage, message, name, failed; $(element).show(); var myIntervalID = setInterval(function() { percentage = getProgress(process_id+"_percentage"); name = getProgress(process_id+"_process_name"); message = getProgress(process_id+"_message"); failed = getProgress(process_id+"_process_failed"); if(percentage) $(element).find('.progress-bar').css('width',percentage+'%').html(percentage+"% "+message); },2000); } //initialize progress bar //initialize_progress(".progress"); $(".upload-button").click(function() { //set listener updateProgress('upload_the_pix', ".progress") var request = $.get( "http://example.com/?progress", function(data) { alert(data); }) .done(function() { alert( "second success" ) }).fail(function() { alert( "error" ); }).always(function() { alert( "finished" ); }); });

<div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%"> </div> </div>

class ProcessProgress { protected static $process_id; //current process_id protected static $process_name; //current process name protected static $debug_mode = false; protected static $process_killed = false; /** * Make settings for process setup * @param $settings * Example: * $settings=array( * 'process_id' => 'upload_photos' //must be provided 'process_name' =>'Database Wipe', //tile of this process ); */ public static function settings($settings) { # process id must be set #make array keys properties if( is_array($settings) ){ foreach($settings as $key => $value){ self::$$key = $value; } } if(self::$debug_mode && !self::$process_id) exit('process_id must me provided in settings array'); if(isset($_COOKIE[self::$process_id."_percentage"])){ unset($_COOKIE[self::$process_id."_percentage"]); unset($_COOKIE[self::$process_id."_message"]); unset($_COOKIE[self::$process_id."_process_name"]); unset($_COOKIE[self::$process_id."_process_complete"]); unset($_COOKIE[self::$process_id."_process_failed"]); unset($_COOKIE[self::$process_id."_process_killed"]); } } /** * Kill this process */ public static function kill() { self::$process_killed = true; } /** * @param $percentage * @param $message * @param bool $complete * @param bool $failed * @return bool */ public function setProgress($percentage, $message, $complete=false, $failed=false){ $process_data = array( 'percentage'=>$percentage, 'message' => $message, 'process_id' => self::$process_id, 'process_name' => self::$process_name, 'process_complete' => $complete, 'process_failed' => $failed, 'process_killed' => self::$process_killed, ); setcookie(self::$process_id."_percentage", $percentage, time() + (86400 * 30)); // 86400 = 1 day setcookie(self::$process_id."_message", $message, time() + (86400 * 30)); // 86400 = 1 day setcookie(self::$process_id."_process_name", self::$process_name, time() + (86400 * 30)); // 86400 = 1 day setcookie(self::$process_id."_process_complete", $complete, time() + (86400 * 30)); // 86400 = 1 day setcookie(self::$process_id."_process_failed", $failed, time() + (86400 * 30)); // 86400 = 1 day setcookie(self::$process_id."_process_killed", self::$process_killed, time() + (86400 * 30)); // 86400 = 1 day //verify if(isset($_COOKIE[self::$process_id])) return true; #delay 1 second //sleep(1); } }

if(isset($_GET['progress'])){ ProcessProgress::settings(array( 'process_id' => 'upload_the_pix', 'process_name' => 'Picture Upload', )); ProcessProgress::setProgress(0, 'Initializing'); for($count=0; $count < 10001; $count++){ switch($count){ case 1000: ProcessProgress::setProgress(10, 'Coping files'); break; case 2000: ProcessProgress::setProgress(20, 'Setting up email'); break; case 3000: ProcessProgress::setProgress(30, 'Looking up things'); break; case 4000: ProcessProgress::setProgress(40, 'Milking your cow'); break; case 5000: ProcessProgress::setProgress(50, 'Syncing contacts'); break; case 6000: ProcessProgress::setProgress(60, 'Updating Facebook profile'); break; case 7000: ProcessProgress::setProgress(70, 'Calling your girl friend'); break; case 8000: ProcessProgress::setProgress(80, 'Making things up'); break; case 9000: ProcessProgress::setProgress(90, 'Feeding your dogs'); break; case 10000: ProcessProgress::setProgress(100, 'Done. Congrats'); break; } }