Laravel 5.4 - 拖放不起作用

Posted 2023-02-24

【中文标题】Laravel 5.4 - 拖放不起作用

【英文标题】：Laravel 5.4 - drag drop not working

【发布时间】：2017-12-04 23:38:52

【问题描述】：

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

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 文件。

请帮助我。谢谢。

【问题讨论】：

如果你愿意使用 dropzone js，下面的文章会有所帮助。 devartisans.com/articles/upload-image-dropzone-laravel5

【参考方案1】：

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

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

【讨论】：

文件在我手动选择文件时上传，但在我拖放时不会上传，所以权限应该不是问题。

我检查了开发者工具。当我拖放图像时，我看到 3 行：data:image/jpeg;base64...,data:image/png;base64...,data:image/png;base64...。当我转到每个人的响应选项卡时，我看到 This request has no response data