<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form enctype="multipart/form-data" id="form1">
<input type="text" name="name">
<input type="file" name="imgfile" />
<input type="button" id="btnsubmit" value="上传" />
</form>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.js"></script>
<script>
$(function () {
$("#btnsubmit").click(function () {
$("#form1").ajaxSubmit({
url: '/index/wechat_share/get_detail', /*设置post提交到的页面*/
type: "post", /*设置表单以post方法提交*/
dataType: "json" ,/*设置返回值类型为文本*/
// resetForm: true, //提交成功后是否重置表单中的字段值,即恢复到页面加载时的状态
// clearForm: true, //成功提交后,是否清除所有表单元素的值
success: function (data) {
console.log(data);
},
error: function (error) {
alert(error);
},
});
});
});
</script>
</html>
//php后台
public function get_detail()
{
$file = request()->file();
// dump($file);
$params = request()->param();
// dump($params);
$result = array('code' => 1);
return json($result);
}
一、jQuery.Form.js 配置选项options
选项 说明
url 表单提交数据的地址
type form提交的方式(method:post/get)
target 服务器返回的响应数据显示在元素(Id)号
beforeSerialize: function($form, options) 表单数据被序列化之前执行的回调函数,如果在内部return false将终止序列化和提交。
beforeSubmit: function(arr, $form, options) 表单数据被序列化成arr数组,并且在提交前触发的回调函数。
error 提交失败执行的回调函数
success 提交成功后执行的回调函数
data 除了表单数据外,还需要额外提交到服务器的数据
iframe 如果有<input type="file">是否应该使用iframe来上传文件(对旧版本浏览器而言)
iframeSrc 为<iframe>元素设定src属性值
iframeTarget 如果你想用自己的iframe来上传文件,可以将Id传给这个属性
dataType 期望服务器返回数据类型
clearForm 提交成功后是否清空表单中的字段值
restForm 提交成功后是否重置表单中的字段值,即恢复到页面加载时的状态
timeout 设置请求时间,超过该时间后,自动退出请求,单位(毫秒)
forceSync
semantic
uploadProgress
参考 链接:https://blog.csdn.net/m0_37505854/article/details/79639046