jsp + js 文件上传获取进度

最新推荐文章于 2018-11-08 10:32:52 发布

BusyMonkey

最新推荐文章于 2018-11-08 10:32:52 发布

阅读量1.6k

点赞数 1

分类专栏： Web 文章标签： jsp js XMLHttpRequest

本文链接：https://blog.csdn.net/Dopamy_BusyMonkey/article/details/51161418

版权

Web 专栏收录该内容

63 篇文章 2 订阅

订阅专栏

话不多说上代码

<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">    
<html>    
<head>    
    <title>Spring 3.0 MVC demo</title>
    <script>
    	function uploadFile() {
            var fd = new FormData();
            var xhr = new XMLHttpRequest();
    		var fileName = document.getElementById("fileName");
    		var fileInfo = document.getElementById("upload").files[0];
    		fileName.innerText = "FileName: " + fileInfo.name;
            fd.append("upload", document.getElementById('upload').files[0]);
            xhr.upload.addEventListener("progress", uploadProgress, false);
            xhr.addEventListener("load", uploadComplete, false);
            xhr.addEventListener("error", uploadFailed, false);
            xhr.addEventListener("abort", uploadCanceled, false);
            xhr.open("POST", "upload.html");
            xhr.send(fd);
    	}
        function uploadProgress(evt) {
			if (evt.lengthComputable) {
				var percentComplete = Math.round(evt.loaded * 100 / evt.total);
				document.getElementById("progressNumber").innerText
					= "progressNumber: " + percentComplete.toString() + '%';
			}
			else {
				document.getElementById("progressNumber").innerText = "unable to compute";
			}
		}
        function uploadComplete(evt) {
			alert(evt.target.responseText);
		}
		function uploadFailed(evt) {
			alert("There was an error attempting to upload the file.");
		}
		function uploadCanceled(evt) {
			alert("The upload has been canceled by the user or the browser dropped the connection.");
		}
    </script> 
</head>    
<body> 
    Please choose the file :<br />
    <form action="upload.html" method="post" enctype="multipart/form-data">
        <input type="file" id="upload" size="50"/>
        <br />  
    	<input type="button" value="开始上传" onclick="uploadFile()"/>
    </form> 
	<p id=fileName>FileName: -</p>
	<p id="progressNumber">progressNumber: -</p>
</body>    
</html>

接收程序参考（servlet 或者 springmvc ）：点击打开链接或者点击打开链接