为老式的文件上传添加不显眼的进度条
大家都知道，新一代花哨的，主要是基于闪存的文件上传器，如，可以在上传时显示进度条-这是一个巨大的改进，特别是对于不稳定和低带宽的连接。
然而，这些上传程序都有自己的逻辑，即如何在客户端处理上传。我正在寻找一种不引人注目的方式来“幻想”现有的，经典的文件上传，即引入了一个进度条到正常的文件上传表单。
由于上传文件的体系结构，如果不对客户端进行一些调整，这很可能是不可能的。
我正在寻找一个将调整保持在绝对最小的解决方案，例如，一个组件将自己添加到普通表单的onsubmit事件中，执行文件上传，显示一个漂亮的进度条，将生成的临时(服务器端)文件路径放入表单中，然后提交它。在服务器端，我只需要修改我的脚本，使用flash uploader提供的文件路径，而不是$_FILES和consorts，并考虑一下安全性。
这并不完全是所有基于Flash的上传器所做的:他们可以使用表单中的数据，但他们不提供按原样提交表单的可能性，这就是我正在寻找的。我正在寻找一个(可能)基于闪存的上传功能采取了进一步的。
回答 6
Stack Overflow用户
发布于 2010-02-11 01:40:06
我们通过安装PECL扩展pecl-uploadprogress并向表单添加一个简单的AJAX回调来实现这一点：
生成上传密钥：
$upload_id = genUploadKey();
function genUploadKey ($length = 11) {
$charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
for ($i=0; $i < $length; $i++)
$key .= $charset[(mt_rand(0,(strlen($charset)-1)))];
return $key;
}创建一个AJAX回调处理程序(例如，uploadprogress.php)：
extract($_REQUEST);
// servlet that handles uploadprogress requests:
if ($upload_id) {
$data = uploadprogress_get_info($upload_id);
if (!$data)
$data['error'] = 'upload id not found';
else {
$avg_kb = $data['speed_average'] / 1024;
if ($avg_kb<100)
$avg_kb = round($avg_kb,1);
else if ($avg_kb<10)
$avg_kb = round($avg_kb,2);
else $avg_kb = round($avg_kb);
// two custom server calculations added to return data object:
$data['kb_average'] = $avg_kb;
$data['kb_uploaded'] = round($data['bytes_uploaded'] /1024);
}
echo json_encode($data);
exit;
}
// display on completion of upload:
if ($UPLOAD_IDENTIFIER) {
...下载jQuery和jQuery.uploadprogress库(还包括上述代码片段)，并将其与您的表单集成：
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.uploadprogress.0.3.js"></script>
<script type="text/javascript">
jQuery(function () {
// apply uploadProgress plugin to form element
// with debug mode and array of data fields to publish to readout:
jQuery('#upload_form').uploadProgress({
progressURL:'uploadprogress.php',
displayFields : ['kb_uploaded','kb_average','est_sec'],
start: function() {
$('.upload-progress').show();
},
success: function() {
$('.upload-progress').hide();
jQuery(this).get(0).reset();
}
});
});
</script>将此内容添加到您的上传表单中：
<input name="UPLOAD_IDENTIFIER" type="hidden" value="$upload_id" />这应该能起到作用。这是从我们的代码库中提取出来的，可能无法开箱即用。但它应该告诉你这个想法。
Stack Overflow用户
发布于 2010-02-06 04:57:20
如果您使用PHP5.2或更高版本，IBM制的file upload progress tutorial可以为您提供帮助。
此multiple file upload tutorial使用jQuery + AJAX Upload...它在服务器端使用$_FILES，并会在客户端转换一个特殊的。我想你可以调整它来满足你的需要。
如果调整最后一个太棘手，SourceForge上的Uber-Uploader是另一个选择。
有几十个开源项目涵盖了这个主题。不幸的是，这不是无缝实现的微不足道的东西(至少在你想要的方式上-否则我们已经在Netscape的好日子里看到了这一点)。
从好的方面来看，正如您在this demo和this one中看到的那样，HTML5将简化这一过程。
我希望这对你的集成有帮助，并祝你好运。
Stack Overflow用户
发布于 2009-10-31 15:13:04
jquploader使用表单内部的信息，比如动作属性值作为上传脚本。但是我已经有一段时间没有更新它了，而且它缺少像uploadify这样的那些花哨的脚本(顺便说一下，这是一个很好的脚本)。看看它是否可以作为你调整的基础。
https://stackoverflow.com/questions/1650317
复制相似问题
腾讯云开发者
