教你使用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带进度条多文件上传

相关文章