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">&nbsp; &nbsp; @csrf&nbsp; &nbsp; <input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" />&nbsp; &nbsp; <input type="file" name="proposal[]" id="proposal" class="form-control name_list" />&nbsp; &nbsp; <button type="button" name="add" id="add" class="btn btn-success">Add More</button>&nbsp; &nbsp; <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">&nbsp; &nbsp; $('#add_name').submit(function(e) {&nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; var form = $(this);&nbsp; &nbsp; &nbsp; &nbsp; var formData = new FormData(this);&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: form.attr('action'),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; method: "POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: formData,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'json',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; processData: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; contentType: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function(data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (data.error) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; printErrorMsg(data.error);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; i = 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.dynamic-added').remove();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#add_name')[0].reset();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".print-success-msg").find("ul").html('');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".print-success-msg").css('display', 'block');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".print-error-msg").css('display', 'none');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".print-success-msg").find("ul").append('<li>Record Inserted Successfully.</li>');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // location.href = "http://www.example.com/ThankYou.html"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; });</script>家庭控制器.phppublic function addMorePost(Request $request){&nbsp; &nbsp; $name = $request->name;&nbsp; &nbsp; $proposal = $request->file('proposal');&nbsp; &nbsp; foreach ($proposal as $file) {&nbsp; &nbsp; &nbsp; &nbsp; $file->store('proposals');&nbsp; &nbsp; }&nbsp; &nbsp; for ($count = 0; $count < count($name); $count++) {&nbsp; &nbsp; &nbsp; &nbsp; $data = array(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'name' => $name[$count],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'proposal' => $proposal[$count]&nbsp; &nbsp; &nbsp;//already change 'proposal[]' but not work&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; TagList::create($data);&nbsp; &nbsp; }&nbsp; &nbsp; return response()->json(['success' => 'done']);}