文件异步上传方式(二)

最新推荐文章于 2024-07-15 15:59:36 发布

weixin_34168700

最新推荐文章于 2024-07-15 15:59:36 发布

阅读量82

点赞数

文章标签： php javascript ViewUI

为了浏览器兼容，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_width: "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; width: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资源下载点这里

weixin_34168700

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文件异步上传方式(二)

为了浏览器兼容，js目前需要借助flash的力量实现文件异步上传。swfupload是用使用最广泛的文件上传flash。文件目录：/test.html 上传页面，表单所在页面/test.php 处理上传的controller/swfupload/swfupload.js 此文件夹中放swfupload相关资源/swfupload/handlers.js ...
复制链接

扫一扫