html5用ajax方式实现文件上传并显示进度_单个文件上传,显示上传进度 javascript-优快云博客

本文链接：https://blog.youkuaiyun.com/andypan1314/article/details/50611888

该博客演示了如何利用HTML5的FormData和XMLHttpRequest对象，通过Ajax方式实现文件上传，并实时显示上传进度。用户选择文件后，JavaScript函数UploadFile()被触发，将文件发送到upload.php进行处理。同时，progressFunction()函数用于更新进度条和百分比显示。当文件上传成功，会调用processData()处理数据，并通过getProgress()获取处理进度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
    <title>Html5 Ajax 上传文件</title>
    <script type="text/javascript">

        function UploadFile() {
            var fileObj = document.getElementById("myfile").files[0]; // js 获取文件对象
            var FileController = "upload.php";                    // 接收上传文件的后台地址 

            // FormData 对象
            var form = new FormData();
            form.append("uploadtype", "html5");                        // 可以增加表单数据
            form.append("myfile", fileObj);                           // 文件对象

            // XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();
            xhr.open("post", FileController, true);
            xhr.onload = function () {
            	var result = eval('(' + xhr.responseText + ')');
            	if (result.code == 0) {
            		document.getElementById('info').innerHTML = "上传完成!开始处理数据。。。";
                	processData(result.data);
                }
                else {
                	alert(result.msg);
                }
            };
            xhr.upload.addEventListener("progress", progressFunction, false);
            xhr.send(form);
        }
        
        function progressFunction(evt) {
            var progressBar = document.getElementById("progressBar");
            var percentageDiv = document.getElementById("percentage");
            if (evt.lengthComputable) {
                progressBar.max = evt.total;
                progressBar.value = evt.loaded;
                percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
            }
        }
        
        var nid = null;
        var processhandle = null;
        function processData(resultnid) {
        	if (!resultnid) {
        		return;
        	}
        	nid = resultnid;
        	processhandle = setInterval(getProgress, 1000);
        }
        function getProgress() {
        	var xhr = new XMLHttpRequest();
            xhr.open('get', 'getprogress.php?nid=' + nid, true);
            xhr.onload = function () {
            	var result = eval('(' + xhr.responseText + ')');
            	//更新进度
            	var evt = {'lengthComputable': true, 'total': 100, 'loaded': result.progress};
            	progressFunction(evt);
            	//处理错误
            	if (result.code > 0) {
            		document.getElementById('info').innerHTML = result.msg;
            		clearInterval(processhandle);
            	}
            	//处理完成
            	else if (result.progress == 100) {
            		document.getElementById('info').innerHTML = "处理完成：" + result.result.msg;
                	clearInterval(processhandle);
                }
            };
            xhr.send();
        }
    </script>
</head>

<body>
	<span id="info">上传进度</span><br />
    <progress id="progressBar" value="0" max="100"></progress>
    <span id="percentage"></span>
    <br /><br />
    
    <input type="file" id="myfile" name="myfile" />
    <input type="button" οnclick="UploadFile()" value="上传" />
</body>

</html>