master

分支 (1)

管理

管理

master

boa_cgi_html_mysql
/
upload.html

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>upload</title>
	<script src="js/jquery-2.2.3.min.js"></script>
	<script src="js/jquery-ui.min.js"></script>
	<link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<script src="js/bootstrap.min.js"></script>
	<script>
		//文件上传ajax部分
		function uploadFile()
		{
			var fd = new FormData();
			fd.append("file", document.getElementById('file').files[0]);
			var xhr = new XMLHttpRequest();
			xhr.upload.addEventListener("progress", uploadProgress, false);
			xhr.addEventListener("load", uploadComplete, false);
			xhr.addEventListener("error", uploadFailed, false);
			xhr.addEventListener("abort", uploadCanceled, false);
			xhr.open("POST", "cgi-bin/upload.cgi"); //修改成自己的接口
			xhr.send(fd);
		}

		function uploadProgress(evt)
		{
			if (evt.lengthComputable)
			{
				var percentComplete = Math.round(evt.loaded * 100 / evt.total);
				$("#progressNumberDiv").width(percentComplete.toString() + '%');
				document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
			}
			else
			{
				$("#progressNumberDiv").width('0%');
				document.getElementById('progressNumber').innerHTML = 'unable to compute';
			}
		}

		function uploadComplete(evt)
		{
			/* 服务器端返回响应时候触发event事件*/
			alert(evt.target.responseText);
			document.getElementById('file').outerHTML = document.getElementById('file').outerHTML;
		}

		function uploadFailed(evt)
		{
			alert("There was an error attempting to upload the file.");
			document.getElementById('file').outerHTML = document.getElementById('file').outerHTML;
		}

		function uploadCanceled(evt)
		{
			alert("The upload has been canceled by the user or the browser dropped the connection.");
			document.getElementById('file').outerHTML = document.getElementById('file').outerHTML;
		}
	</script>
</head>

<body>
	<h2>目录权限，程序权限记得都给上</h2>
	<form method="post" enctype="multipart/form-data">
		<input type="file" name="file" class="file" id="file" />
		<div class="progress">
			<div class="progress-bar progress-bar-success" role="progressbar"
				aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
				style="width: 0%;" id="progressNumberDiv">
				<span class="sr-only" id="progressNumber">--</span>
			</div>
		</div>
		<br>
		<button type="button" class="btn btn-primary" onclick="uploadFile();">上传</button>
	</form>
</body>
</html>