Laravel 5.4 - 拖拽不起作用

Question

我有一个带有文件输入字段的表单:

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());
    }
}

脚本

<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>

这将呈现拖放形式,如下所示:

表单字段可能看起来有点不同,因为我只发布了相关代码.

我的问题是,当我拖放文件时,其预览显示在中间预览窗口中,但是当我继续下一页时,该字段不会显示.我甚至尝试过$request()->all(),但没有文件输入的值.

但是,当我手动选择文件并提交时,它会显示出来.我也补充说enctype="multipart/form-data",但仍然没有成功.

如果有帮助,我正在使用此模板.我正在查看自定义文件输入部分.我也进口的所有相关.css和.js文件.

请帮我.谢谢.

Answer 1

我假设，这种拖放会触发某种 Ajax。尝试观察开发工具的网络选项卡 (f12)，看看当您放置图像时是否会触发某些内容。

如果是这样，请单击它并检查响应选项卡，它可能试图告诉您问题是什么。如果我不得不猜测，我会说您尚未启用该文件夹的写入权限。