文件上传是WEB应用必备功能,尤其是在处理大文件上传的时候,十分需要上传时候实时显示上传进度。PHP实现上传进度条比较麻烦,一种是PHP创始人写的那个APC扩展,另外一种则需要使用PECL扩展模块uploadprogress实现。但是他们各有不足:
1、他们都需要额外安装(我们并没有打算把APC加入PHP5.2.6中);
2、它们都使用本地机制来存储这些信息, APC使用共享内存, 而uploadprogress使用文件系统(不考虑NFS), 这在多台前端机的时候会造成麻烦。
鉴于此,本文介绍一个最方便,也最简单的实现上传进度条的方法:使用swfload实现PHP上传进度条。可以实现多文件一起上传哦。
直接给代码:
XML/HTML Code复制内容到剪贴板
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <title>SWFUpload上传例子- SWFObject上传例子</title>
- <link href="../css/default.css" rel="stylesheet" type="text/css" />
- <script type="text/javascript" src="../swfupload/swfupload.js"></script>
- <script type="text/javascript" src="js/swfupload.swfobject.js"></script>
- <script type="text/javascript" src="js/swfupload.queue.js"></script>
- <script type="text/javascript" src="js/fileprogress.js"></script>
- <script type="text/javascript" src="js/handlers.js"></script>
- <script type="text/javascript">
- var swfu;
-
- SWFUpload.onload = function () {
- var settings = {
- flash_url : "../swfupload/swfupload.swf",
- upload_url: "upload.php",
- post_params: {
- "PHPSESSID" : "NONE",
- "HELLO-WORLD" : "Here I Am",
- ".what" : "OKAY"
- },
- file_size_limit : "100 MB",//文件大小限制
- //file_types : "*.jpg;*.gif;*.png;*.jpeg;*.flv;*.mp4;*.avi;*wmv",
- file_types : "*.*",
- file_types_description : "All Files",//文件类型
- file_upload_limit : 100,
- file_queue_limit : 0,
- custom_settings : {
- progressTarget : "fsUploadProgress",
- cancelButtonId : "btnCancel"
- },
- debug: false,
-
- // Button Settings
- //button_image_url : "XPButtonUploadText_61x22.png",
- button_image_url: "TestImageNoText_65x29.png",//按钮图片
- button_placeholder_id : "spanButtonPlaceholder",//按钮id
- button_text: '<span class="theFont">浏览</span>',//按钮文字
- button_text_style: ".theFont { font-size: 16; }",//按钮文字字号
- button_text_left_padding: 12,//按钮左边距
- button_text_top_padding: 3,//按钮上边距
- button_width: "65",//按钮宽
- button_height: "29",//按钮高
- //button_width: 61,
- //button_height: 22,
-
- // The event handler functions are defined in handlers.js
- swfupload_loaded_handler : swfUploadLoaded,
- file_queued_handler : fileQueued,
- file_queue_error_handler : fileQueueError,
- file_dialog_complete_handler : fileDialogComplete,
- upload_start_handler : uploadStart,
- upload_progress_handler : uploadProgress,
- upload_error_handler : uploadError,
- upload_success_handler : uploadSuccess,
- upload_complete_handler : uploadComplete,
- queue_complete_handler : queueComplete, // Queue plugin event
-
- // SWFObject settings
- minimum_flash_version : "9.0.28",
- swfupload_pre_load_handler : swfUploadPreLoad,
- swfupload_load_failed_handler : swfUploadLoadFailed
- };
-
- swfu = new SWFUpload(settings);
- }
-
- </script>
- </head>
- <body>
- <div id="content">
-
- <h2>SWFObject上传例子</h2>
- <form id="form1" action="index.php" method="post" enctype="multipart/form-data">
- <p>点击“浏览”按钮,选择您要上传的文档文件后,系统将自动上传并在完成后提示您。</p>
- <div id="divSWFUploadUI">
- <div class="fieldset flash" id="fsUploadProgress"><span class="legend">快速上传</span></div>
- <p id="divStatus">0 个文件已上传</p>
- <p>
- <span id="spanButtonPlaceholder"></span>
- <input id="btnCancel" type="button" value="取消所有上传" disabled="disabled" style="margin-left: 2px; height: 29px; font-size: 8pt;" />
- <br />
- </p>
- </div>
- <noscript>
- <div style="background-color: #FFFF66; border-top: solid 4px #FF9966; border-bottom: solid 4px #FF9966; margin: 10px 25px; padding: 10px 15px;">
- 对不起,您的浏览器不支持javascript。
- </div>
- </noscript>
- <div id="divLoadingContent" class="content" style="background-color: #FFFF66; border-top: solid 4px #FF9966; border-bottom: solid 4px #FF9966; margin: 10px 25px; padding: 10px 15px; display: none;">
- SWFUpload上传组件正在载入,请稍后
- </div>
- <div id="divLongLoading" class="content" style="background-color: #FFFF66; border-top: solid 4px #FF9966; border-bottom: solid 4px #FF9966; margin: 10px 25px; padding: 10px 15px; display: none;">
- SWFUpload上传组件载入超时。 请确保Flash插件安装正确,并且版本支持本上传组件。
- </div>
- <div id="divAlternateContent" class="content" style="background-color: #FFFF66; border-top: solid 4px #FF9966; border-bottom: solid 4px #FF9966; margin: 10px 25px; padding: 10px 15px; display: none;">
- SWFUpload不能载入. 请安装或升级Flash Player.
- 点击这里 <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Adobe website</a> 获得Flash Player.
- </div>
- </form>
- </div>
- </body>
- </html>
运行效果如图:

上传后的视频在这里:

upload.php部分:
PHP Code复制内容到剪贴板
- if (isset($_FILES["Filedata"]) || !is_uploaded_file($_FILES["Filedata"]["tmp_name"]) || $_FILES["Filedata"]["error"] != 0) {
- $upload_file = $_FILES['Filedata'];
- $file_info = pathinfo($upload_file['name']);
- $file_type = $file_info['extension'];
- $save = 'upload/' . md5(uniqid($_FILES["Filedata"]['name'])) . '.' . $file_info['extension'];
- $name = $_FILES['Filedata']['tmp_name'];
-
- if (!move_uploaded_file($name, $save)) {
- exit;
- }
-
-
- $fileName = 'test.txt';
- $postData = var_export($file_info, true);
- $file = fopen('' . $fileName, "w");
- fwrite($file,$postData);
- fclose($file);
- }
附件下载:使用SWFupload实现PHP上传进度条的demo