LARAVEL 5 使用 AJAX 将图像发送到控制器答案

【问题标题】：LARAVEL 5 sending image to controller using AJAXLARAVEL 5 使用 AJAX 将图像发送到控制器
【发布时间】：2016-05-06 08:11:40
【问题描述】：

当我想通过 Ajax 将图像传递给控制器时，我遇到了一些问题。有什么帮助吗？这是我的代码

//路线

Route::post('get-image', 'CreateImageController@get_image');

//IMAGE.BLADE.PHP

{!! Form::open([ 'id'=>'upload-doc','files'=>true ]) !!}

{!! Form::file('fileupload', ['id'=>'fileupload', 'onchange'=>"this.parentNode.nextSibling.value = this.value" ], null) !!}Browse
<button type="button" id="uploadFile">Upload</button>
{!! Form::close() !!}

//AJAX

action  = "<?php echo action('CreateImageController@get_image'); ?>";
$.ajax({
    url:    action,
    type:   'POST',
    data:   new FormData($("#upload_doc")[0]),
    cache:  false,
    dataType: 'json',
    processData: false,
    contentType: false, 
    success: function(data){
        alert(data.display);
    }
});

// 控制器函数get_image()

public function get_image(){

        $name = '';
        $image = \Input::file('fileupload');
        $validator = \Validator::make([$image], ['image' => 'required']);
        if ($validator->fails()) {
            $name = "FAIL";
        }
        else{
            $name = "SUCCESS";
        }

        $data = array('display' => $name);
        echo json_encode($data);
  }

我每次得到的结果都是“失败”。我做错了什么？

【问题讨论】：

标签： ajax image file laravel

【解决方案1】：

你可以的

if (Input::file('fileupload')) {

}

作为一种验证方式。

【讨论】：

感谢您的快速回复；我试过了 ` if (\Input::hasFile('fileupload')) ` ，但没有运气。我想知道控制器是否真的收到了文件。
确保您在控制器使用部分 use Input; 中有这个，并删除 Input:: ....
我就是这么做的。它仍然给我同样的结果。
在渲染后发布视图源，以便在 yoru 浏览器中查看页面，复制 body 标签之间的内容并将其粘贴到此处或使用 Pastitbin 或其他东西。
当我使用提交按钮提交表单时，我不明白它是如何通过的，但当我使用 Ajax 时却不是。

【解决方案2】：

@SAri Yono，我通过后就没有视野了；它被发送回 ajax jquery 以使用 alert/console.log 显示结果

<meta name="_token" content="{{ csrf_token() }}" /> 
<script type="text/javascript">

$(document).ready(function() {  

$("#upload-doc").submit(function(e){
    e.preventDefault();
});

$.ajaxSetup({
 headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')    }
}); 

$.ajax({
   url:     action,
   type:    'POST',
   data:    new FormData($("#upload_doc")[0]),
   cache:   false,
   dataType: 'json',
   processData: false,
   contentType: false, 
   success: function(data){
        console.log(display);
   }
});

e.preventDefault();

});
</script>

在body标签之间我只有Form。

{!! Form::open([ 'id'=>'upload-doc','files'=>true ]) !!}
{!! Form::file('fileupload', ['id'=>'fileupload'], null) !!}
<button type="button" id="uploadFile">Upload</button>
{!! Form::close() !!}

Console.log 显示此Object {display: "FAIL"}

【讨论】：

为什么不返回 Input::all();只是为了让我们可以看到什么被忽略了

【解决方案3】：

我解决了。因为我只是在提交表单时才获得文件。我决定添加

$("#upload-doc").submit();  
var formData = new FormData($('#upload-doc')[0]);

在我的 jquery 方法中

$("#uploadFile").click(function(e) {

$("#upload-doc").submit();
var formData = new FormData($('#upload-doc')[0]);
action="<?php echo action('CreateImageController@get_image'); ?>";

$.ajax({
    url:    action,
    type:   'POST',
    data:   formData,
    cache:  false,
    dataType: 'json',
    processData: false,
    contentType: false, 
    success: function(data){
        alert('in success');
        console.log(data);
        e.preventDefault();
    }
});
})

【讨论】：