需求
页面上需要异步上传文件
ajax简单介绍
常用的有.get()， .post()， .load()等等，其中.ajax()是通用方法，前者均可以通过此方法实现。具体可查看https://www.runoob.com/jquery/jquery-ref-ajax.html
上传前端代码
<!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-TypeprocessData: 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"> <!--onsubmit阻止点击按钮后浏览器自动提交表单-->文件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>
后端代码（do_upload.php）
<?php//演示用，仅显示下上传上来的数据
echo "_FILES<br>";
echo var_dump($_FILES);
echo "<br><br>_POST<br>";
echo var_dump($_POST);
echo "<br>";?>演示
参看
- https://blog.csdn.net/AP0906424/article/details/122805115
- https://www.runoob.com/w3cnote/php-ajax-xmlhttprequest.html
