文件上传：完成进度条的百分比
我正在尝试在BuddyPress中添加“已完成的百分比”进度条到头像上传。 目的是在上传完成之前阻止用户离开页面。
上传过程由BuddyPress中的bp_core_avatar_handle_upload()在文件bp-core / bp-core-avatars.php中处理。 该函数通过使用bp_core_check_avatar_upload()检查文件是否已正确上载来bp_core_check_avatar_upload() 。 然后它检查文件大小是否在限制范围内，并且它具有可接受的文件扩展名（jpg，gif，png）。 如果一切都结束，则允许用户裁剪图像（使用Jcrop ），然后将图像移动到其真实位置。
实际上传由WordPress函数wp_handle_upload处理。
如何创建“完成百分比”进度条并在文件上传时显示？
我不熟悉BuddyPress，但所有上传处理程序（包括androbin概述的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：
您应该使用XHR对象。 如果它对你有所帮助我现在不行，但是我写了一个简单的XHR上传器。
HTML：
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”，则会提示错误。
我认为，在您担心客户端之前，您应该了解服务器端实际能够实现此目的的要求。
对于PHP，你需要启用session.upload_progress，除非wp_handle_upload（）函数使用不同的东西，所以我在这里只是猜测，但他们可能会使用常规的PHP会话，因此需要启用它。
如果您查看给定链接的注释，许多用户说进度状态在某些环境下不起作用，例如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）并且它们具有良好的连接，那么通知将没有太大进展。
请查看此链接，了解有关如何使用此会话上载数据的分步示例。
您需要注入进度条。
我认为唯一的方法是使用filter钩子apply_filters（’bp_core_pre_avatar_handle_upload’等）来覆盖函数bp_core_avatar_handle_upload。
您最终会复制大部分function，但您应该能够添加进度条码。
如果你有这个工作，你应该把它作为增强票提交; 这是个好主意。