FormData 对象的使用
super
2018-06-12 18:10
4507
使用FormData提交表单实例:
1)创建一个表单
<form id="form" enctype="multipart/form-data" method="post">
Title:<input type="text" name="title" />
Synopsis:<textarea name="synopsis"></textarea>
Img:<input type="file" name="img" />
</form>
2)提交表单
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
//创建FormData对象
var formObj = $("#form")[0];
//var formObj = document.getElementById("form");//同上
var formData = new FormData(formObj);//实例化FormData对象,传入表单对象,注意FormData大小写
//ajax发送表单数据到后台
$.ajax({
url: "xx.php",
type: 'POST',
data: formData,
dataType: "JSON",
async: false,
cache: false, //不缓存
processData: false, //jquery不要去处理发送的数据
contentType: false, //jquery不要去设置Content-type请求头
success: function(data) {
//
}
})
</script>
3)ajax提交后,可以通过F12 Network找到本次请求
在Headers的最底部可以看到发送的数据
4)后台接收
PHP打印
print_r($_FILES);
print_r($_POST);
成功获取到了表单中的数据。
5)后台处理
balabalabala…
后台处理并返回处理结果
0 条讨论