Question

我看到https://github.com/enyo/dropzone/issues/418提交了没有文件的表单，但这对我不起作用。

我有一个表单，用户可以在其中编辑信息（文本字段和图像）并提交表单。问题是，如果用户未选择任何图像并单击提交按钮，则dropzone不会提交表单。这是我的代码：

Dropzone.options.myAwesomeDropzone = {
  autoProcessQueue: false,
  paramName: "space_images",
  uploadMultiple: true,
  previewsContainer: ".dropzone-previews",
  paralUplolleads: 10,
  thumbnailWidth: 200,
  thumbnailHeight: 200,
  acceptedFiles: '.png,.jpg,.jpeg',
  dictDefaultMessage: 'Upload your images here',
  dictInvalidFileType: 'invalid file type. Please use jpg or png format    pictures',

  init: function() {
    myAwesomeDropzone = this;

    //making a remove button and removing file from dropzone and server too.
    this.on("addedfile", function(file) {
      var removeButton = Dropzone.createElement("<button>Remove</button>");
      var _this = this;
      removeButton.addEventListener("click", function(e) {
        // Make sure the button click doesn't submit the form:
        e.preventDefault();
        e.stopPropagation();

        // Remove the file preview.
        _this.removeFile(file);
        // If you want to the delete the file on the server as well,
        // you can do the AJAX request here.
        $.ajax({
          type: 'DELETE',
          url: '/deleteImage',
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          data: {
            id: file.name
          },
          success: function(data) {
            console.log(success);

          } //success function end
        }); //ajax function end
      }); //event listener end

      // Add the button to the file preview element.
      file.previewElement.appendChild(removeButton);
    }); //added file end

    this.on('error', (file, response) => {
      console.log("error", response.city);
      for (var key in response) {
        console.log(response[key][0]);
      }
    }); //error function end

    // converting php varaible into js variable
    var images = {!!json_encode($list - > images) !!
    };

    // showing images in dropzone that are already in server
    images.forEach(element => {
      var mockFile = {
        name: element.space_image,
        size: element.size,
        type: 'image/jpeg',
        accepted: true // required if using 'MaxFiles' option
      };

      myAwesomeDropzone.files.push(mockFile); // add to files array
      // if user does not choose any new photo to upload...
      myAwesomeDropzone.emit("addedfile", mockFile);
      myAwesomeDropzone.emit("thumbnail", mockFile, '/storage/space_images/' + element.space_image);
      myAwesomeDropzone.emit("complete", mockFile);
    }); //foreach end

    //now we will submit the form when the button is clicked
    document.querySelector("#sbmtbtn").addEventListener('click', function(e) {
      if (myAwesomeDropzone.getQueuedFiles().length > 0) {
        console.log('---------', myAwesomeDropzone.files);
        e.preventDefault();
        myAwesomeDropzone.processQueue();
      } else {
        myAwesomeDropzone.uploadFiles([]);
      }
    }); //click function end
  }, //init end
} //dropzone end

当用户单击“提交”按钮时，没有任何反应

myAwesomeDropzone.uploadFiles([]);

不起作用。我在服务器端使用php laravel。请帮助我这段代码有什么错误。

在Dropzone中添加文件无法提交表单

0 个答案: