Laravel 动态表单输入文本和上传文件

Question

我input type="file"在尝试添加之前添加到动态表单插入所有作品时遇到问题，input type="file" 我在浏览器上没有收到错误消息addMore.blade.php<form name="add_name" id="add_name" enctype="multipart/form-data"><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /><input type="file" name="proposal[]" id="proposal" class="form-control name_list" /><button type="button" name="add" id="add" class="btn btn-success">Add More</button> //add dynamically input<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" /> </form>这里是ajax$('#submit').click(function(){                        $.ajax({                  url:postURL,                  method:"POST",                  data:$('#add_name').serialize(),                type:'json',                success:function(data)                  {                    if(data.error){                        printErrorMsg(data.error);                    }else{                        i=1;                        $('.dynamic-added').remove();                        $('#add_name')[0].reset();                        $(".print-success-msg").find("ul").html('');                        $(".print-success-msg").css('display','block');                        $(".print-error-msg").css('display','none');                        $(".print-success-msg").find("ul").append('<li>Record Inserted Successfully.</li>');                        // location.href = "http://www.example.com/ThankYou.html"                    }                }             });        }); //note the dynamic add input filed button already works #add//already tried remove serialize() still not work//also i got no error message on the browser这里是 HomeController.php

Answer 1

您在通过 ajax 发送数据时使用序列化，您需要使用 ajax 传递 FormData。

下面是使用ajax发送文件的完整代码，您也可以在提交表单时触发事件，这样您就可以获取整个表单数据：

<form name="add_name" id="add_name" enctype="multipart/form-data" action="home" method="post">

    @csrf

    <input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" />

    <input type="file" name="proposal[]" id="proposal" class="form-control name_list" />

    <button type="button" name="add" id="add" class="btn btn-success">Add More</button>

    <input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />

</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">

    $('#add_name').submit(function(e) {

        e.preventDefault();

        var form = $(this);

        var formData = new FormData(this);

        $.ajax({

            url: form.attr('action'),

            method: "POST",

            data: formData,

            type: 'json',

            processData: false,

            contentType: false,

            success: function(data) {

                if (data.error) {

                    printErrorMsg(data.error);

                } else {

                    i = 1;

                    $('.dynamic-added').remove();

                    $('#add_name')[0].reset();

                    $(".print-success-msg").find("ul").html('');

                    $(".print-success-msg").css('display', 'block');

                    $(".print-error-msg").css('display', 'none');

                    $(".print-success-msg").find("ul").append('<li>Record Inserted Successfully.</li>');

                    // location.href = "http://www.example.com/ThankYou.html"

                }

            }

        });

        return false;

    });

</script>

家庭控制器.php

public function addMorePost(Request $request){

    $name = $request->name;

    $proposal = $request->file('proposal');

    foreach ($proposal as $file) {

        $file->store('proposals');

    }

    for ($count = 0; $count < count($name); $count++) {

        $data = array(

            'name' => $name[$count],

            'proposal' => $proposal[$count]     //already change 'proposal[]' but not work

        );

        TagList::create($data);

    }

    return response()->json(['success' => 'done']);

}