使用ajax上传文件

需求

页面上需要异步上传文件

ajax简单介绍

常用的有.get()， .post()， .load()等等，其中.ajax()是通用方法，前者均可以通过此方法实现。具体可查看https://www.runoob.com/jquery/jquery-ref-ajax.html

上传前端代码

DOCTYPE html>
<html>
	<head>
		<meta charset="utf8">
		<title>test uploadtitle>
		
		<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){
					      	//错误处理

					      }  
					});
        		});
        	}
		script>
	head>
	<body>
		<form id="myFormId" onsubmit="return false"> 
			文件1：<input type="file" name="file1"><br>
			文件2：<input type="file" name="file2"><br>
			文本：<input type="text" name="text1"><br>
			<button id="uploadBtnId">点击上传button>
		form>
		<p id="resultId"><p>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

后端代码（do_upload.php）



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

_POST
";
echo var_dump($_POST);
echo "
";

?>


1
2
3
4
5
6
7
8
9
10
11
12

演示

在这里插入图片描述

参看

相关阅读:
Redis实现微博好友功能微服务（关注，取关，共同关注）
【leetcode】【剑指offer Ⅱ】045. 二叉树最底层最左边的值
LLVM之父Chris Lattner：为什么我们要重建AI基础设施软件
数据结构c版（2）——二叉树
小数十进制转二进制
序列化与反序列化And存入redis中的数据为什么要序列化
numpy常用属性以及切片操作
【prometheus】三种方式安装Prometheus
速盾网络：CDN用几天关了可以吗？安全吗？
觉哥java网站搭建笔记——后端开发环境搭建

原文地址：https://blog.csdn.net/s634772208/article/details/127548881