文件異步上傳方式(二)

時間 2019-11-19

標籤文件異步上傳方式简体版

原文原文鏈接

爲了瀏覽器兼容，js目前須要藉助flash的力量實現文件異步上傳。swfupload是用使用最普遍的文件上傳flash。javascript

文件目錄：php

/test.html 上傳頁面，表單所在頁面html

/test.php 處理上傳的controllerjava

/swfupload/swfupload.js 此文件夾中放swfupload相關資源瀏覽器

/swfupload/handlers.js 異步

/swfupload/swfupload.swf函數

/upfiles/ 上傳文件的存放目錄post

test.htmlurl

<!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.phpspa

<?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資源下載點這裏