Ajax 图片上传 Laravel 文件请求空白答案

【问题标题】：Ajax Image Upload Laravel File Request BlankAjax 图片上传 Laravel 文件请求空白
【发布时间】：2018-08-06 12:45:04
【问题描述】：

当我使用标准文本时，ajax 没有任何问题，但我想上传文件我看不到文件数据。

没有问题控制器或路由文件。另外，我的添加表单和更新表单相同。

我在网上搜索了上面的代码，但不知道怎么用？

data:new FormData($("#slogan")[0]),

最好的问候。

我的html代码如下

<form method="post" id="slogan" class="form-horizontal" data-toggle="validator"  enctype="multipart/form-data">
  {{ csrf_field() }} {{ method_field('POST') }}
  <input type="hidden" name="id" id="id">
  <div class="modal-body">
     <div class="form-group">
         <label for="message-text" class="control-label">Upload Image</label>
         <input type="file" id="logo" name="logo" class="form-control">
     </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Exit</button>
    <button id="tamamla" type="submit" class="btn btn-primary btn-save">Save</button>
  </div>
</form>

我的 Javascript 代码如下

<script type="text/javascript">

      var table = $('#slogans-table').DataTable({
                      processing: true,
                      serverSide: true,
                      ajax: "{{ url('api/slogan') }}",
                      columns: [
                        {data: 'id', name: 'id'},
                        {data: 'title', name: 'title'},
                        {data: 'description', name: 'description'},
                        {data: 'logo', name: 'logo'},
                        {data: 'hotel.name', name: 'hotel.name'},
                        {data: 'lang.code', name: 'lang.code'},
                        {data: 'action', name: 'action', orderable: false, searchable: false}
                      ]
                    });
      function addForm() {
        data:new FormData($("#slogan")[0]),
        save_method = "add";
        $('input[name=_method]').val('POST');
        $('#modal-form').modal('show');
        $('#modal-form form')[0].reset();
        $('.modal-title').text('Slogan Ekle');
      }

function editForm(id) {
        save_method = 'edit';
        $('input[name=_method]').val('PATCH');
        $('#modal-form form')[0].reset();
        $.ajax({
          url: "{{ url('slogan') }}" + '/' + id + "/edit",
          type: "GET",
          dataType: "JSON",
          success: function(data) {
            $('#modal-form').modal('show');
            $('.modal-title').text('Slogan Düzenle');
            $('#id').val(data.id);
            $('#name').val(data.name);
            $('#hotel_id').val(data.hotel_id);
            $('#lang_id').val(data.lang_id);
          },
          error : function() {
              alert("Data Bulunamadı");
          }
        });
      }
</script>

【问题讨论】：

标签： php ajax laravel

【解决方案1】：

如果您愿意，您的代码中有一些错误，然后可以使用此代码：- 查看刀片代码：-

<html>
<head>
    <title>Laravel 5 - Ajax Image Uploading Tutorial</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
</head>
<body>
<div class="container">
  <form action="{{ route('ajaxImageUpload') }}" enctype="multipart/form-data" method="POST">
    <div class="alert alert-danger print-error-msg" style="display:none">
        <ul></ul>
    </div>
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <div class="form-group">
      <label>Alt Title:</label>
      <input type="text" name="title" class="form-control" placeholder="Add Title">
    </div>
    <div class="form-group">
      <label>Image:</label>
      <input type="file" name="image" class="form-control">
    </div>
    <div class="form-group">
      <button class="btn btn-success upload-image" type="submit">Upload Image</button>
    </div>
  </form>
</div>    
<script type="text/javascript">
  $("body").on("click",".upload-image",function(e){
    $(this).parents("form").ajaxForm(options);
  });
  var options = { 
    complete: function(response) 
    {
        if($.isEmptyObject(response.responseJSON.error)){
            $("input[name='title']").val('');
            alert('Image Upload Successfully.');
        }else{
            printErrorMsg(response.responseJSON.error);
        }
    }
  };
  function printErrorMsg (msg) {
    $(".print-error-msg").find("ul").html('');
    $(".print-error-msg").css('display','block');
    $.each( msg, function( key, value ) {
        $(".print-error-msg").find("ul").append('<li>'+value+'</li>');
    });
  }
</script>
</body>
</html>

控制器代码：-

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Validator;
use App\AjaxImage;
class AjaxImageUploadController extends Controller
{
    public function ajaxImageUpload()
    {
        return view('ajaxImageUpload');
    }
    public function ajaxImageUploadPost(Request $request)
    {
      $validator = Validator::make($request->all(), [
        'title' => 'required',
        'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
      ]);
      if ($validator->passes()) {
        $input = $request->all();
        $input['image'] = time().'.'.$request->image->getClientOriginalExtension();
        $request->image->move(public_path('images'), $input['image']);
        AjaxImage::create($input);
        return response()->json(['success'=>'done']);
      }
      return response()->json(['error'=>$validator->errors()->all()]);
    }
}

【讨论】：