文件异步上传方式(二)
为了浏览器兼容，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资源下载点这里