文件异步上传方式(二)

为了浏览器兼容,js目前需要借助flash的力量实现文件异步上传。swfupload是用使用最广泛的文件上传flash。

文件目录:

/test.html   上传页面,表单所在页面

/test.php    处理上传的controller

/swfupload/swfupload.js     此文件夹中放swfupload相关资源

/swfupload/handlers.js       

/swfupload/swfupload.swf

/upfiles/                            上传文件的存放目录

test.html

<!DOCTYPE html>
<html>
<head>
<title>异步上传文件demo</title>
<!-- 导入相关资源 -->
<script type="text/javascript" src="swfupload/swfupload.js"></script>
<script type="text/javascript" src="swfupload/handlers.js"></script>
<script type="text/javascript">
		var swfu;

		window.onload = function() {
			var settings = {
				flash_url : "swfupload/swfupload.swf",	//上传flash位置
				upload_url: "test.php",					//接受上传的服务端脚本
				file_size_limit : "100 MB",				//上传文件大小限制
				file_post_name : "upfile",				//服务端接受文件名,相当于input name
				file_types : "*.*",						//上传文件类型
				file_types_description : "All Files",	//上传文件类型描述
				file_upload_limit : 100,				//上传文件数限制
				file_queue_limit : 0,
				custom_settings : {
					cancelButtonId : "btnCancel"
				},
				debug: false,

				// Button settings
				//button_image_url: "about:blank",		//可以为上传按钮设背景图
				button_ "100",					//上传按钮宽
				button_height: "30",					//上传按钮高
				button_placeholder_id: "spanButtonPlaceHolder",	//上传按钮ID
				button_text: '<span class="theFont">上传文件</span>',	//按钮文本和样式
				button_text_style: ".theFont { font-size: 14; text-align:center;}",
				
				swfupload_preload_handler : preLoad,
				swfupload_load_failed_handler : loadFailed,
				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 : uploadErrorCo,	//以下三个函数自定义,出错,成功,完成后做什么,其它的不用管
				upload_success_handler : uploadSuccessCo,
				upload_complete_handler : uploadCompleteCo
			};

			swfu = new SWFUpload(settings);
	     };
		 function uploadErrorCo(data){
			alert("上传失败");
		 }
		 function uploadSuccessCo(data){
			document.getElementById("uploadedFile").innerHTML = data.name;
		 }
		 function uploadCompleteCo(data){
		 }
	</script>
</head>
<body>
<div id="content">
	<form id="form1" action="test.php" method="post" enctype="multipart/form-data">
		<span id="spanButtonPlaceHolder"></span>
		<span style="font-size: 14px; vertical-align:top; display:inline-block; 100px; height:30px; text-align:center;" id="uploadedFile"></span>
		<!-- 取消 -->
		<button style="display:none;" id="btnCancel">取消</button>
	</form>
</div>
</body>
</html>

test.php

<?php
	var_dump($_FILES);
	if(isset($_FILES['upfile']) && $_FILES['upfile']['error']>0){
		echo '上传出错';
	}else{
		move_uploaded_file($_FILES["upfile"]["tmp_name"],"upfiles/".$_FILES["upfile"]["name"]);
	}
?>

如此看来,swfupload.swf并不是根据php的返回结果确定是否已上传成功。或者是我不清楚如果判断。

用swfupload上传能做到"比较"炫,可以一次上传多个文件,可以显示进度,可以取消等

另,swfupload资源下载点这里

原文地址:https://www.cnblogs.com/frostbelt/p/3430745.html