javascript - 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

public function addMorePost(Request $request){
    $name = $request->name;
    $proposal = $request->file('proposal')->store('proposals');   //already change to ->file(proposal[]) not work

    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']);
}

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>

HomeController.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']);
}