問題描述
你們都知道新一代花哨的，主要是基于 Flash 的文件上傳器，例如 SWFUpload 可以在上傳時顯示進度條 - 一個很大的改進，特別是對于不穩定和低帶寬的連接.
You all know the new generation of fancy, mostly Flash-based file uploaders like SWFUpload that can show a progress bar while uploading - a great improvement especially for shaky and low-bandwidth connections.
然而，這些上傳者都自帶了如何在客戶端處理上傳的邏輯.我正在尋找一種不顯眼的方式來幻想"現有的經典文件上傳，即在普通文件上傳表單中引入進度條.
However, these uploaders all bring their own logic of how to handle uploads on the client side. I am looking for an unobtrusive way to "fancify" existing, classical file uploads, i.e. introducing a progress bar to normal file upload forms.
由于上傳文件的架構，如果不在客戶端進行一些調整，這很可能是不可能的.
Due to the architecture of uploading files, this is most likely not possible without some tweaking on the client side.
我正在尋找一種將調整保持在絕對最小值的解決方案，例如一個將自身添加到普通表單的 onsubmit 事件的組件，執行文件上傳，顯示一個漂亮的進度條，將生成的臨時(服務器端)文件路徑放入表單中，然后提交.在服務器端，我只需要修改我的腳本以使用flash上??傳器提供的文件路徑，而不是$_FILES和consorts，并考慮一下安全性.
I am looking for a solution that keeps the tweaking to an absolute minimum, e.g. a component that adds itself to the onsubmit event of a normal form, performs the file upload, displays a nice progress bar, puts the resulting temporary (server side) file path into the form, and submits it. On the server side, I just have to modify my script to use the file path provided by the flash uploader, instead of $_FILES and consorts, and think about security for a moment.
這并不是所有基于 Flash 的上傳者所做的:他們可以使用表單中的數據，但他們不提供按原樣提交表單的可能性，我正在尋找什么.我正在尋找更進一步的(可能)基于 Flash 的上傳功能.
推薦答案
我們通過安裝 PECL 擴展pecl-uploadprogress 并在表單中添加了一個簡單的 AJAX 回調來實現這一點:
We implemented this very simple by installing the PECL extension pecl-uploadprogress and added a simple AJAX callback to the forms:
生成上傳密鑰:
$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):
Create an AJAX callback handler (eg. 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 庫(其中還包括上述代碼段)并與您的表單集成:
Download jQuery and the jQuery.uploadprogress libraries (which also includes the above snippet) and integrate with your form:
<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>
將此添加到您的上傳表單:
Add this to your upload form:
<input name="UPLOAD_IDENTIFIER" type="hidden" value="$upload_id" />
這應該可以解決問題.這是從我們的代碼庫中提取的，可能無法開箱即用.但它應該告訴你這個想法.
That should do the trick. This is extracted from our code base and may not work out-of-the-box. But it should tell you the idea.
這篇關于向老式文件上傳添加不顯眼的進度條的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！