layui中文件如何在表单里上传

 

首先，文件上传在layui中虽然是独立的模块，但是其如果也在表单中的话，也是可以随着表单建立formData对象的。故此只需要将其模块中的提交去掉，从而用ajax来提交formDate表单就可以了。

这是一段上传文件的代码

html代码

<form class="layui-form" action="#" enctype="multipart/form-data" id="up_form">

    <div class="layui-upload uploadbuchong" id="fileshow" style="border:1px solid #00F7DE; border-radius: 2px;">
                
        <button class="layui-btn layui-btn-normal" type="button">选择文件</button>
               
    </div>

    <button class="layui-btn layui-btn-normal" lay-submit="" id="upup" lay-filter="upup">提交</button>

</form>

js代码 

关闭了提交按钮，将在下面的ajax提交中随表单一起提交

layui.use('upload', function () {
        var $ = layui.jquery
        , upload = layui.upload;
        //文件上传   已关闭
        upload.render({
            elem: '#supplement_file'
            , url: 'http://192.168.0.10/admin/demo/demo'
            , accept: 'file'
            , auto: false
            // , bindAction: '#upfile' //关闭的上传按钮   html中此id所在元素也被注释
            ,multiple: true
            , done: function (res) {
                alert("上传成功");
            }
        });
    })

ajax代码  建立formdata对象代码  提交按钮点击事件调用

function fsubmit(fd) {
        $.ajax({
            url: "php",
            type: "POST",
            data: fd,
            async : false,
            contentType: false,   //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
            processData: false,   //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
            error : function(request) {
                parent.layer.alert("网络超时");
            },
            success: function (data) {
                alert("上传成功！");
            }
        });
        return false;
    }

    $("#upup").on("click",function () {
        var formSatellite = document.getElementById("up_form");//获取所要提交form的id
        var fs1 = new FormData(formSatellite);  //用所要提交form做参数建立一个formdata对象
        fsubmit(fs1);//调用函数
    })

ok了传上去了