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

首先我们直接去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 Settings
upload_url: "__APP__/Upload/upload",
post_params: {},

// File Upload Settings
file_size_limit : "100 MB",// 2MB
file_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 Settings
button_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 Settings
flash_url : "__PUBLIC__/swfupload.swf",

custom_settings : {
upload_target : "divFileProgressContainer"
},

// Debug Settings
debug: 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 "上传成功";
}
}

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

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

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

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

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

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

秒客网

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

相关文章