教你使用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 "上传成功";
}
}我们再来看看浏览器调试结果。
再看看上传完成的调试结果
借助bootstreap的进度条样式。我们可以很容易的计算出当前进度。算法为
var m_progress = parseInt(load / total * 100, 10);
progress.text(m_progress+"%");
p.css("width",m_progress+"%");
智能推荐
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。