需求
页面上需要异步上传文件
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-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"> <!--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>";
?>
演示
扫一扫
710
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
