Laravel 5.4 - kéo thả không làm việc

Question

Tôi có một hình thức với một lĩnh vực tập tin đầu vào như:

profile.blade.php

<form id="profile-form" name="profile-form" class="form-horizontal" role="form" method="post" enctype="multipart/form-data" action="{{url('user/profileAction')}}"> 
    {{csrf_field()}} 

    <div class="form-group"> 
     <div class="col-xs-12"> 
      <label class="col-sm-3 control-label no-padding-right" for="avatar"> Avatar </label> 
      <div class="col-xs-12 col-sm-5"> 
       <input type="file" id="avatar" name="avatar" value="{{$user->avatar}}"> 
      </div> 
      </div> 
     </div> 

    <div class="clearfix form-actions"> 
     <div class="col-md-offset-3 col-md-9"> 
      <button class="btn btn-success btn-submit" type="submit"> 
       <i class="ace-icon fa fa-save fa-fw bigger-110"></i> Save changes</button>  
     </div> 
    </div>  
</form> 

web.php

Route::post('user/profileAction', 'UserController@profileAction'); 

UserController.php

class UserController extends Controller 
{    
    public function profileAction(Request $request) 
    { 
     dd($request->all()); 
    } 
} 

tập lệnh

<script type="text/javascript"> 
     jQuery(function ($) { 

      function show() { 
       @if(!empty($user->avatar)) 
        $('.restore-group').show('fast'); 
       @endif 
      } 

      function populate() { 
       @if(!empty($user->avatar)) 
        avatar.ace_file_input('show_file_list', [ 
        {type: 'image', name: '{{decrypt($user->avatar)}}', path: '{{url('file/avatar/small')}}'} 
       ]); 
       @endif 
      } 

      var avatar = $('#avatar'); 

      avatar.ace_file_input({ 
       style: 'well', 
       btn_change: null, 
       droppable: true, 
       thumbnail: 'small', 
       btn_choose: "Drop images here or click to choose", 
       no_icon: "ace-icon fa fa-picture-o", 
       allowExt: ["jpeg", "jpg", "png", "gif", "bmp"], 
       allowMime: ["image/jpg", "image/jpeg", "image/png", "image/gif", "image/bmp"], 
       show_file_list: ['file.png'], 
       before_remove: function() { 
        show(); 
        $('#_action').val('removed'); 
        return true; 
       }, 
       before_change: function() { 
        show(); 
        $('#_action').val('changed'); 
        return true; 
       } 
      }).on('change', function(){ 
       console.log($(this).data('ace_input_files')); 
       //console.log($(this).data('ace_input_method')); 
      }); 

      populate(); 
     }); 
</script> 

này ám một kéo và thả hình thức trông giống như vậy:

các trường biểu mẫu có thể trông hơi khác một chút kể từ khi tôi chỉ gửi mã có liên quan.

Vấn đề của tôi là khi tôi kéo thả tệp, bản xem trước của nó xuất hiện trong cửa sổ xem trước ở giữa, nhưng khi tôi chuyển sang trang tiếp theo, trường này không được hiển thị. Tôi thậm chí đã thử làm $request()->all(), nhưng không có giá trị cho đầu vào tệp.

Nhưng khi tôi chọn tệp theo cách thủ công và gửi, tệp sẽ hiển thị. Tôi cũng đã thêm enctype="multipart/form-data", nhưng vẫn không thành công.

Nếu có ích, tôi đang sử dụng mẫu this. Phần đầu vào tệp tùy chỉnh là những gì tôi đang xem. Tôi cũng đã nhập tất cả các tệp .css và .js có liên quan.

Hãy giúp tôi. Cảm ơn.

Answer 1

Tôi giả sử, thao tác kéo và thả này sẽ kích hoạt một số loại Ajax bị tắt. Hãy thử xem tab mạng của các công cụ dev (f12) xem liệu khi bạn thả hình ảnh một cái gì đó bị sa thải đi.

Nếu có, hãy nhấp vào đó và kiểm tra tab phản hồi, Có thể bạn đang cố gắng cho bạn biết vấn đề là gì. Nếu tôi đã đoán tôi muốn nói rằng bạn đã không kích hoạt quyền ghi vào thư mục.