教你使用swfupload带进度条多文件上传

来源：互联网发布：java画图编辑：程序博客网时间：2024/06/16 04:04

首先我们直接去github搜索swfupload.下面是下载地址

https://github.com/danifbento/SWFUpload

下载好了以后我们只需要swfupload.js和swfupload.swf,handler.js这个文件我们可以不用。我们自己参照着自己编写。

下面是我的demo代码。首先是html上传界面。

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <script type="text/javascript" src="__PUBLIC__/swfupload.js"></script>  <title>文件上传测试</title> </head> <body>  <buttton id="upload"></button>  <script>var swfu;window.onload = function () {swfu = new SWFUpload({// Backend Settingsupload_url: "__APP__/Upload/upload",post_params: {},// File Upload Settingsfile_size_limit : "100 MB",// 2MBfile_types : "*.mp4",file_types_description : "JPG Images",file_upload_limit : 1,file_queue_error_handler : fileQueueError,file_dialog_complete_handler : fileDialogComplete,upload_progress_handler : uploadProgress,upload_error_handler : uploadError,upload_success_handler : uploadSuccess,upload_complete_handler : uploadComplete,// Button Settingsbutton_image_url : "",button_placeholder_id : "upload",button_width: 100,button_height: 40,button_text : '<span>点击上传图片</span>',//button_text_style : '.button { font-family: Helvetica, Arial, sans-serif; font-size: 12pt; } .buttonSmall { font-size: 10pt; }',button_text_top_padding: 0,button_text_left_padding: 18,button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,button_cursor: SWFUpload.CURSOR.HAND,// Flash Settingsflash_url : "__PUBLIC__/swfupload.swf",custom_settings : {upload_target : "divFileProgressContainer"},// Debug Settingsdebug: false});};function uploadProgress(file,load,total){console.log("uploadProgress：目前加载"+load+"   总数："+total);}function uploadError(file, errorCode, message){console.log("uploadError：错误信息："+message);}function uploadSuccess(file, serverData){console.log("上传成功："+serverData);}function uploadComplete(file){console.log("上传完成");}function fileQueueError(file, errorCode, message) {try {var imageName = "error.gif";var errorName = "";if (errorCode === SWFUpload.errorCode_QUEUE_LIMIT_EXCEEDED) {errorName = "You have attempted to queue too many files.";}if (errorName !== "") {alert(errorName);return;}switch (errorCode) {case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:imageName = "zerobyte.gif";break;case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:imageName = "toobig.gif";break;case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:default:alert(message);break;}addImage("images/" + imageName);} catch (ex) {this.debug(ex);}}function fileDialogComplete(numFilesSelected, numFilesQueued) {try {if (numFilesQueued > 0) {this.startUpload();}} catch (ex) {this.debug(ex);}}  </script> </body></html>

handler.js里的内容我们已经直接写到了html里所以不用引入handler.js了哦。

现在看看php后端上传代码。我采用的TP框架。

 public function upload(){import('ORG.Net.UploadFile');$upload = new UploadFile();// 实例化上传类$upload->maxSize  = 314572800000 ;// 设置附件上传大小$upload->allowExts  = array('mp4');// 设置附件上传类型$upload->savePath =  './Uploads/';// 设置附件上传目录if(!$upload->upload()) {// 上传错误提示错误信息echo $upload->getErrorMsg();}else{// 上传成功 获取上传文件信息echo "上传成功";}}

我们再来看看浏览器调试结果。

再看看上传完成的调试结果

借助bootstreap的进度条样式。我们可以很容易的计算出当前进度。算法为

var m_progress = parseInt(load / total * 100, 10); progress.text(m_progress+"%");p.css("width",m_progress+"%");

0 0