使用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

使用jquery.form插件的方法

猜你喜欢