ajax上传文件时显示进度

最新推荐文章于 2023-03-08 22:51:25 发布

shanql

最新推荐文章于 2023-03-08 22:51:25 发布

阅读量759

点赞数

分类专栏： Web开发 HTML PHP 文章标签： ajax进度 ajax上传

本文链接：https://blog.csdn.net/s634772208/article/details/127552339

版权

Web开发同时被 3 个专栏收录

27 篇文章 0 订阅

订阅专栏

PHP

11 篇文章 0 订阅

订阅专栏

HTML

3 篇文章 0 订阅

订阅专栏

需求

ajax上传文件时，有时比较耗时，需要在界面上显示下进度信息

解决方案

获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数

前端代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf8">
		<title>test upload</title>
		<!--jquery-->
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script>
			//页面加载完时加载此函数
        	window.onload = function() 
        	{
        		$('#uploadBtnId').click(function(e)
        		{
        			$('#resultId').html();

        			//使用FormData对象来提交整个表单，它支持文件的上传
   					var formData=new FormData(document.getElementById("myFormId"));
   					formData.append("ddd", 10); //也可使用append追加数据
					$.ajax(
					{
					      url: 'do_upload.php',
					      data: formData,
					      contentType: false, //false: 自动加上正确的Content-Type
					      processData: false,  //false： 避开jQuery对 formdata 的默认处理
					      enctype: 'multipart/form-data',
					      type: "POST",
					      complete:function(res)
					      {
					      },
					      success: function (res, status)
					      {
							$('#resultId').html(res);
					      },
					      error: function(res){
					      	//错误处理

					      },
					      xhr: function(){ //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
				           var myXhr = $.ajaxSettings.xhr();
				           if(myXhr.upload){ //检查upload属性是否存在
				               //绑定progress事件的回调函数
				               $('#progressId').text(); //清空
				               myXhr.upload.addEventListener('progress', function(e) 
				               {
				               		if (e.lengthComputable)
				               		{
				               			var percent = "上传进度：" + e.loaded/e.total*100 + "%";
				               			$('#progressId').text(percent);
				               		}
				               }, 
				               false);
				            }
				            return myXhr; //xhr对象返回给jQuery使用
				        },
					});
        		});
        	}
		</script>
	</head>
	<body>
		<form id="myFormId" onsubmit="return false"> <!--onsubmit阻止点击按钮后浏览器自动提交表单-->
			文件1：<input type="file" name="file1"><br>
			文本：<input type="text" name="text1"><br>
			<button id="uploadBtnId">点击上传</button>
		</form>
		<p id="progressId"></p>
		<p id="resultId"></p>
	</body>
</html>

后端代码

<?php

//演示用，仅显示下上传上来的数据
echo "_FILES<br>";
echo var_dump($_FILES);
echo "<br><br>_POST<br>";
echo var_dump($_POST);
echo "<br>";


?>

运行截图

在这里插入图片描述

参看

shanql

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
ajax上传文件时显示进度

ajax上传文件时，有时比较耗时，需要在界面上显示下进度信息
复制链接

扫一扫

专栏目录