Dropzone：一次提交表单数据和dropzone

Question

我知道有一些这样的问题，但他们没有准确回答问题。

这就是我需要的，

使用 Dropzone
将表单数据和上传的图片路径保存到数据库

问题是，如何同时发送表单数据和dropzone文件，就像下面的官方文档文章一样。

我关注了这个Dropzone官方文档Combine normal form with Dropzone

我试过这篇文章，它奏效了。我可以在其中获得表单数据和 files.But，整个表单是 Dropzone。我只需要使用 div.

制作一个 Dropzone

然后我尝试了这个方法，

先上传文件，返回上传文件路径
通过将值设置为从响应
接收的文件路径来创建隐藏input
提交表格

但问题是，如果我使用这种方法，我必须先上传文件。如果在我提交 form 时请求被破坏怎么办？没有数据会保存，但是服务器上有上传的文件。

我希望你们能帮我解决这个问题。谢谢

Answer 1

我不认为这是可能的。您必须先上传文件，然后数据库记录将是 added/updated。一旦您的请求提交给服务器，数据库记录将在纳秒内更新。所以不用担心。它与核心相同php。

为了安全起见，您的网络服务器和数据库服务器应该相同，以提高行为效率。

如果您仍然想要更高的安全性，请编写一个 crone 作业，这将在一天结束时运行并将所有文件与服务器断开链接，这些文件不存在于数据库记录中。

Answer 2

myDropzone.on("sending", function(file, xhr, formData) { 

 formData.append("fieldname1", $('field-name-1').val());  

});

您甚至可以自动执行此操作，并对 #form 的每个输入执行 $.each，但基本逻辑在上面。

tips 选项卡下的 docs 概述了此内容的基本内容。

Answer 3

var dropzone = $("#dropzone"),
 input = dropzone.find('input');

 dropzone.on({
  dragenter : dragin,
  dragleave : dragout
 });

 input.on('change', drop);
  
  function dragin(e) { //function for drag into element, just turns the bix X white
  $(dropzone).addClass('hover');
 }

 function dragout(e) { //function for dragging out of element                         
  $(dropzone).removeClass('hover');
 }
  
  function drop(e) {
  var file = this.files[0];
  $('#dropzone').removeClass('hover').addClass('dropped').find('img').remove();
  // upload file here
  showfile(file); // showing file for demonstration ... 
 }

#dropzone {
  position: relative;
  border: 5px solid #000;
  border-radius: 10px;
  color: #000;
  font: bold 24px/200px arial;
  height: 200px;
  margin: 30px auto;
  text-align: center;
  width: 200px;
 }
 #dropzone.hover {
  border: 4px solid green;
  color: green;
 }
 #dropzone.dropped {
  background: #222;
  border: 5px solid #444;
 }
 #dropzone div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
 }
 #dropzone img {
  border-radius: 5px;
  vertical-align: middle;
  max-width: 95%;
  max-height: 95%;
 }
 #dropzone [type="file"] {
  cursor: pointer;
  position: absolute;
  opacity: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
 }
 #session_message_succ{
  text-align: center;
  color: #07bd07;
 }
 #session_message_err{
  text-align: center;
  color: #e2350e;
 }
 .container{
  text-align: center;
 }
 .meta_data{
  text-align: center;
 }
 .submit_div
 {
  display: flex;
  align-items: center;
  margin-bottom:15px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="demoFiler" method='POST' id="demoFiler" action="upload/do_upload'" enctype="multipart/form-data">
  
  <div id="dropzone">
   <div>Drop your file</div>
   <input type="file" name="image[]" multiple />
  </div>
  <div class="container">
   
   <div class="submit_div">
    <input type="submit" name="save_form" />
   </div>
  </div>
 </form>

Answer 4

发送时不需要附加表单数据。检查文档并使用 headers 属性

例子

var myDropzone = new Dropzone(".profile-image-upload",
    {
        paramName: "uploadfile",
        url: "/API/PeopleAPI/EditAsync",
        maxFiles: 1,
        headers: getData(),
        uploadMultiple: false,
        autoProcessQueue: false,
        maxFilesize: 20,
        acceptedFiles: "image",
        dictMaxFilesExceeded: "You can only upload 1 image",
        dictDefaultMessage: "",
    });

function getData() {
        var data = {
            //person
            UserName: $('#UserName').val(),
            AspNetUserID: '@Model.AspNetUserID',
            Roles: $('#UserRoles').val(),
            FirstName: $('#FirstName').val(),
            Email: $('#Email').val(),
            LastName: $('#LastName').val(),
            Gender: $('#Gender').val(),
            Password: $('#Password').val(),
            //address
            AddressLine1: $('#AddressLine1').val(),
            AddressLine2: $('#AddressLine2').val(),
            Town: $('#Town').val(),
            RegionID: $('#RegionID').val(),
            RegionName: $('#RegionID :selected').text(),
            City: $('#City').val(),
            CountyID: $('#CountyID').val(),
            CountyName: $('#CountyID :selected').text(),
            PostCode: $('#PostCode').val(),
          __RequestVerificationToken: $('[name="__RequestVerificationToken"').val()
        };
        return data;
    }

Dropzone：一次提交表单数据和dropzone

Dropzone: Submit both form data and dropzone at once

php

codeigniter

file-upload

dropzone.js