【问题标题】:Laravel and Dropzone - How to get files in server sideLaravel 和 Dropzone - 如何在服务器端获取文件
【发布时间】:2018-06-22 04:25:44
【问题描述】:

我正在尝试在 laravel 项目中使用 dropzone,但我无法在服务器端获取文件。

我的刀片 html 代码:

{!! Form::open(['id' => 'create-intervention-form', 'url' => '/create-intervention', 'method' => 'post', 'class' => '']) !!}
   <div id="multimedia" class="data new dropzone">

   </div>
   <div class="btn-new-bottom">
      <a href="#new-intervention">Criar Intervenção</a>
   </div>
{!! Form::close() !!}

在 jquery 中我输入了这段代码:

$("div#multimedia").dropzone({
          url: "/create-intervention",
          paramName: "file", // The name that will be used to transfer the file
          maxFilesize: 1024,
          autoProcessQueue: false
        });

要提交表单,我需要提交一个 jquery 函数。在控制器中,我尝试获取 $files[] = Input::file('file'); 但这返回 null。

控制器:

public function store(Request $request)
    {
      $rules = array(
      );

      // do the validation ----------------------------------
      // validate against the inputs from our form
      $validator = Validator::make(Input::all(), $rules);

      // check if the validator failed -----------------------
      if ($validator->fails())
      {

          // get the error messages from the validator
          $messages = $validator->messages();

          return redirect()->back()->withErrors($validator)->withInput();
      }
      else
      {
        $files[] = Input::file('file');

        var_dump($files);
      }
};

我该怎么做?我想使用 dropzone 上传多个文件,但只是在我提交表单时。在控制器中,我必须将每个文件保存在目录中,并将文件名保存在数据库中。

谢谢

【问题讨论】:

  • 您可以在控制器中发布更多代码吗?
  • @JoseRojas 我用控制器代码更新了这个问题。我只是想接收要处理的文件,但 var_dump 返回 null。
  • 在您的表单上尝试添加enctype="multipart/form-data"
  • 返回此错误:为 foreach() @WildBeard 提供的参数无效

标签: javascript php jquery laravel dropzone.js


【解决方案1】:

添加到你的表单打开方法'files' =&gt; true

documentation

【讨论】:

  • 在控制器中返回给我这个为 foreach() 提供的无效参数。就像不识别 $request->file('file') @devnullΨ
  • 尝试在到达循环之前转储$request-&gt;all(),并向我们展示结果
  • 不要打印任何关于文件的内容! @devnullΨ
  • 我猜这意味着它不发送文件。您是否添加了'files' =&gt; true 并检查了html 源代码是否在您的表单标签中有enctype="multipart/form-data"
  • 是的!问题可能出在提交按钮上,因为我使用了锚标记。 @devnullΨ
【解决方案2】:

您也可以尝试在循环中获取请求的文件:

控制器:

public function store(Request $request)
{
  $rules = array();

  // do the validation ----------------------------------
  // validate against the inputs from our form
  $validator = Validator::make(Input::all(), $rules);

  // check if the validator failed -----------------------
  if ($validator->fails())
  {
      // get the error messages from the validator
      $messages = $validator->messages();

      return redirect()->back()->withErrors($validator)->withInput();
  }
  else
  {
    foreach( $request->file('file') as $file ){        

            $filename = $file->store('file');
            #saves the file
            $array_images_names[] = $filename;
    }

    var_dump($files);
  }
};

JavaScript(允许接受多个文件)

    var post_url_images = $('#post_url_images').val(); 
    Dropzone.options.frm_drop_images = {
    paramName: "file", // The name that will be used to transfer the file
    maxFilesize: 1024,
    // The configuration we've talked about above
    url: post_url_images,
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 100,
    maxFiles: 100,

    // The setting up of the dropzone
    init: function() {
        var myDropzone = this;

        // First change the button to actually tell Dropzone to process the queue.
        this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
        // Make sure that the form isn't actually being sent.
        e.preventDefault();
        e.stopPropagation();
        myDropzone.processQueue();
        });

        // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
        // of the sending event because uploadMultiple is set to true.
        this.on("sendingmultiple", function() {
        // Gets triggered when the form is actually being sent.
        // Hide the success button or the complete form.
        });
        this.on("successmultiple", function(files, response) {
        // Gets triggered when the files have successfully been sent.
        // Redirect user or notify of success.
        });
        this.on("errormultiple", function(files, response) {
        // Gets triggered when there was an error sending the files.
        // Maybe show form again, and notify user of error
        });
    }

  };

尝试使用您的 HTML 表单,如下所示:

<div class="dropzone dropzone-previews" id="frm_drop_images" class="dropzone" method="post" action="{{ url('/admin/products/upload/image') }}"></div>
<!-- hiddent field to set where to post the images -->
<input type="hidden" name="post_url_images" id="post_url_images" value="{{ url('/create-intervention') }}" >
<div class="btn-new-bottom">
<a href="#new-intervention">Criar Intervenção (Não precisa usar este botão)</a>
</div>

【讨论】:

  • 别工作!我必须在html中添加输入还是自动添加dropzone id? @hutuh
  • 嗨@user3242861 我想我发现了一个可能修复您的代码的不同问题,请尝试将您的HTML表单更改为上述表单。我在我的代码中这样使用它并且它可以工作,当你作为普通表单使用
    它不起作用。
  • 如果我添加一个输入来测试并添加一个文件,我会在控制器中收到它。但是使用 dropzone 不起作用。所以问题出在 dropzone @hutuh
  • 我明白了,所以我更改了 HTML 代码和 JavaScript,如果您完全按照我发布的方式进行操作,它应该可以工作。你能试一下吗? @user3242861
  • 如何更改它以使用锚标记?我需要它,因为我有一个功能可以在我单击锚点时提交表单! @hutuh
猜你喜欢
  • 2018-05-26
  • 2013-06-30
  • 1970-01-01
  • 2018-03-14
  • 2015-08-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-08-20
相关资源
最近更新 更多