laravel：图像未与表单一起提交

Question

我在一个页面中有这个表单：

<div class="card-block">
{!! Form::open(array( 'autocomplete' => 'off', 'id' => 'AddModel', 'url' => 'model/useradd', 'files' => true)) !!}
<div class="form-group">
    <label for="picture">Picture</label>
    @if( (new Jenssegers\Agent\Agent)->isMobile() )
    {!! Form::file('image', ['id' => 'modelpic', 'accept' => 'image/*', 'capture' => 'camera'])  !!}
    @else
    {!! Form::file('image', ['id' => 'modelpic']) !!}
    @endif
    <br/>
</div>
<div id="imagePreview" style="display: none;"></div> /** here I show preview of the image through JS */
<div class="form-group">
    {!! Form::submit('Submit', array('id' => 'AddBtn', 'class' => 'btn btn-default' )) !!}
    {!! Form::close() !!}
</div>

在我的控制器中：

public function preview(Request $request)
{
dd($request->file('image'));
}

倾销结果=NULL

我不明白这里有什么问题。我在另一个正常工作的页面中有一个相同的表单。

通过验证请求，我收到错误“需要图像”

$this->validate($request, [

'image' => 'required|mimes:jpeg,jpg,png,gif|image|image_size:>=640'
]);

新信息：

javascript一定有问题，因为删除它控制器可以正常工作：

这是JS

jQuery(function ($) {
    $(document).ready(function () {

        $("body").on("submit", "#AddModel", function (e) {

            var form = $(this);

            $.ajax({
                url: form.prop('action'),
                type: 'post',
                dataType: 'json',
                data: $(this).serialize(),
                success: function (data) {

                console.log(data);


                },
                error: function (textStatus) {

                    {


                        var json = JSON.parse(textStatus.responseText);


                        console.log (json);


                    }

                }
            });
            e.preventDefault();
        });
    });
});

已解决，谢谢@sagar

jQuery(function ($) {
    $(document).ready(function () {

        $("body").on("submit", "#AddModel", function (e) {

            var form = $(this);

            var postData = new FormData($("#AddModel")[0]);

            $.ajax({
                type:'POST',
                url:form.prop('action'),
                processData: false,
                contentType: false,
                data : postData,
                success:function(data){

                    console.log(data);

                },

                error: function (textStatus) {

                    {


                        var json = JSON.parse(textStatus.responseText);


                        console.log (json);


                    }

                }
            });
            e.preventDefault();
        });
    });
});

Answer 1

使用 ajax 上传图片：

这样做：

您可以像这样使用 ajax 上传文件。

在您的表单标签中使用属性 enctype 和表单 html 将如下所示：

 <form enctype="multipart/form-data" id="modal_form_id"  method="POST" >
    <input type="file" name="documents">
 </form>

js代码：

           var postData = new FormData($("#modal_form_id")[0]);

                 $.ajax({
                         type:'POST',
                         url:'your-post-url',
                         processData: false,
                         contentType: false,
                         data : postData,
                         success:function(data){
                           console.log("File Uploaded");
                         }

                      });

在您的控制器端，您可以使用如下功能上传图片。

if(Input::hasFile('documents')) {

    $path = "directory where you wish to upload file";

    $file_name= Input::file('documents');   
    $original_file_name = $file_name->getClientOriginalName();

    $extension       = $file_name->getClientOriginalExtension();
    $fileWithoutExt  = str_replace(".","",basename($original_file_name, $extension));  
    $updated_fileName = $fileWithoutExt."_".rand(0,99).".".$extension; 

    $uploaded = $file_name->move($path, $updated_fileName);

    echo $updated_fileName;

}

更多细节：

File upload through a modal using Ajax

Answer 2

此代码检查请求是否有文件，如果是，则对其命名，然后将文件移动到公共目录中的文件夹。

if($request->hasFile('modelpic')) {
        $file = Input::file('modelpic');
       //get file extension
        $name = 'image'.$file->getClientOriginalExtension();
       //move file to public/images dir
        $file->move(public_path().'/images/', $name);
    }

Answer 3

由于在表单标签中使用了尺寸 (Multipart-form-data)，图像与多部分请求一起提交。 像这样，

<div class="card-block">
  {!! Form::open(array( 'autocomplete' => 'off', 'id' => 'AddModel', 'url' => 'model/useradd', 'files' => true,'enctype' => 'multipart/form-data')) !!}
<div class="form-group">
  <label for="picture">Picture</label>
  @if( (new Jenssegers\Agent\Agent)->isMobile() )
   {!! Form::file('image', ['id' => 'modelpic', 'accept' => 'image/*', 'capture' => 'camera'])  !!}
  @else
   {!! Form::file('image', ['id' => 'modelpic']) !!}
  @endif
<br/>
</div>
<div id="imagePreview" style="display: none;"></div> /** here I show preview of the image through JS */
<div class="form-group">
  {!! Form::submit('Submit', array('id' => 'AddBtn', 'class' => 'btn btn-default' )) !!}
   {!! Form::close() !!}
</div>