使用jquery.form外掛的方法
<!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