首页 > 解决方案 > 使用 laravel 5.7 实现 dropzone 时出错

问题描述

我在使用 laravel 5.7 将 DROPZONE 与系统上的表单文本集成时遇到问题。

我阅读了文档,但无法实现。参考:https ://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone

我阅读了一些教程,例如: https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone https://jsfiddle.net/gued9y6m/ ...但没有一个符合我的标准

js文件

  Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element

// The configuration we've talked about above
 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
});
 }
 }

形式(blade.php)

   <form id="my-awesome-dropzone" class="dropzone">
   <div class="dropzone-previews"></div> <!-- this is were the previews 
    should be shown. -->

   <!-- Now setup your input fields -->
   <input type="email" name="username" />
   <input type="password" name="password" />

   <button type="submit">Submit data and files!</button>
  </form>

我想要什么:用户必须填写所有表单字段,添加照片,当我单击“全部发送”时,ajax 请求将所有字段(包括照片)发送到我的控制器中的一个方法,它将是存储在数据库中。

我想要什么

标签: javascriptjquerylaraveldropzone.js

解决方案


推荐阅读