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');

用户控制器.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"，还是没有成功。

如果有帮助，我正在使用this 模板。我正在查看自定义文件输入部分。我还导入了所有相关的.css 和.js 文件。

请帮助我。谢谢。

Answer 1

我假设，这种拖放会触发某种 Ajax。尝试查看开发工具 (f12) 的网络选项卡，看看当您删除图像时是否会触发某些东西。

如果是，请单击它并检查响应选项卡，它可能试图告诉您问题所在。如果我不得不猜测我会说你没有启用文件夹的写权限。