javascript - 从文件上传到 dropzone

Question

我在我的项目中使用多文件上传和其他字段，我想覆盖通过 dropzone 上传的基本 html 文件，所以我不想通过 ajax 发送文件，我只想拖放文件，然后填充表单并将文件与其他字段同时发送到服务器(当用户按下“发送”时)。

这是没有 dropzone 的工作当前形式，可以完美地工作:

<form action="/Document/Document/Create" enctype="multipart/form-data" method="post">
    <div class="form-horizontal">
        <hr>

        <div class="form-group">
            <div>
                <input name="files" type="file" id="files" multiple>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2" for="sourcePath">Source</label>
            <div class="col-md-10">
                <input class="form-control text-box single-line" data-val="true" data-val-required="Le champ Source est requis." id="sourcePath" name="sourcePath" type="text" value="">
                <span class="field-validation-valid text-danger" data-valmsg-for="sourcePath" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2" for="name">Nom</label>
            <div class="col-md-10">
                <input class="form-control text-box single-line" data-val="true" data-val-required="Le champ Nom est requis." id="name" name="name" type="text" value="">
                <span class="field-validation-valid text-danger" data-valmsg-for="name" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2" for="reference">Référence</label>
            <div class="col-md-10">
                <input class="form-control text-box single-line" data-val="true" data-val-required="Le champ Référence est requis." id="reference" name="reference" type="text" value="">
                <span class="field-validation-valid text-danger" data-valmsg-for="reference" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default">
            </div>
        </div>
    </div>
</form>

这是我尝试过的方法，但它看起来不起作用(没有可放置区域，上传按钮仍然存在)

HTML

<div id="dropzone" class="dropzone">
    <div class="fallback">
        <input name="files" type="file" id="files" multiple />
    </div>
</div>

JS

// DropZone
Dropzone.options.dropzone = {
    paramName: "files", // The name that will be used to transfer the file
    maxFilesize: 10, // MB
    //uploadMultiple: true,
    autoProcessQueue: false,
    accept: function (file, done) {
        if (file.name == "justinbieber.jpg") {
            done("Naha, you don't.");
        }
        else { done(); }
    }
};

编辑:

感谢 melc，它看起来不错，但没有发布"file"。这是帖子内容。示例中的字段更多，因为我给出的示例更简单

Request URL:http://localhost:28790/Document/Document/Create
Request Headers
Provisional headers are shown
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryA5AptmHYANCvKIsO
Origin:http://localhost:28790
Referer:http://localhost:28790/Document/Document/Create
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.107 Safari/537.36
Request Payload
------WebKitFormBoundaryA5AptmHYANCvKIsO
Content-Disposition: form-data; name="__RequestVerificationToken"

W9DAH4P8rACAn6FeB2lh6uhrS1-h25xvhxp0C3q78tqnKzQuzvphoZEyTu46VniBpTzcQ89JxqKjxy9eoTayMjzSJMIjH-u0Fs0toxe4oy39K6-s6uOcM7dicZm8LefBpZMfUqOQwON8Z6rtmAt-8w2
------WebKitFormBoundaryA5AptmHYANCvKIsO
Content-Disposition: form-data; name="sourcePath"

fdgh
------WebKitFormBoundaryA5AptmHYANCvKIsO
Content-Disposition: form-data; name="name"

gfdhfd
------WebKitFormBoundaryA5AptmHYANCvKIsO
Content-Disposition: form-data; name="reference"

fdghdfrg
------WebKitFormBoundaryA5AptmHYANCvKIsO
Content-Disposition: form-data; name="isActive"

true
------WebKitFormBoundaryA5AptmHYANCvKIsO
Content-Disposition: form-data; name="isActive"

false
------WebKitFormBoundaryA5AptmHYANCvKIsO
Content-Disposition: form-data; name="recyclingSpan"

2
------WebKitFormBoundaryA5AptmHYANCvKIsO
Content-Disposition: form-data; name="documentType.id"


------WebKitFormBoundaryA5AptmHYANCvKIsO
Content-Disposition: form-data; name="trainer.id"


------WebKitFormBoundaryA5AptmHYANCvKIsO--

这是生成的 HTML:

<div class="main">
    <h2>Create</h2>
    <form action="/Document/Document/Create" enctype="multipart/form-data" method="post" novalidate="novalidate">
        <div class="form-horizontal">
            <hr>
            <input name="__RequestVerificationToken" type="hidden" value="qvsqgYhMtW6Tc_Cn5st61PPI1jULgz6pMB9iGZS2FPTAyR8HPSDJII0x_Oj0nuTFHrlvwl2HDA3s4sllfOSVDMXFyUnsCeVjxruyGN5goirG73BmfqV6K868Ucj9DN5Tsbssisp-7iiHzSoYCmVQGw2">

            <div class="form-group">
                <label class="control-label col-md-2" for="sourcePath">Source</label>
                <div class="col-md-10">
                    <input class="form-control text-box single-line" data-val="true" data-val-required="Le champ Source est requis." id="sourcePath" name="sourcePath" type="text" value="">
                    <span class="field-validation-valid text-danger" data-valmsg-for="sourcePath" data-valmsg-replace="true"></span>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-md-2" for="name">Nom</label>
                <div class="col-md-10">
                    <input class="form-control text-box single-line" data-val="true" data-val-required="Le champ Nom est requis." id="name" name="name" type="text" value="">
                    <span class="field-validation-valid text-danger" data-valmsg-for="name" data-valmsg-replace="true"></span>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-md-2" for="reference">Référence</label>
                <div class="col-md-10">
                    <input class="form-control text-box single-line" data-val="true" data-val-required="Le champ Référence est requis." id="reference" name="reference" type="text" value="">
                    <span class="field-validation-valid text-danger" data-valmsg-for="reference" data-valmsg-replace="true"></span>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-md-2" for="isActive">Document actif?</label>
                <div class="col-md-10">
                    <div class="checkbox">
                        <input class="check-box" data-val="true" data-val-required="Le champ Document actif? est requis." id="isActive" name="isActive" type="checkbox" value="true">
                        <input name="isActive" type="hidden" value="false">
                        <span class="field-validation-valid text-danger" data-valmsg-for="isActive" data-valmsg-replace="true"></span>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-md-2" for="recyclingSpan">Délai de recyclage</label>
                <div class="col-md-10">
                    <input class="form-control text-box single-line" data-val="true" data-val-number="Le champ Délai de recyclage doit être un nombre." data-val-range="Le champ Délai de recyclage doit être compris entre 1 et 999." data-val-range-max="999" data-val-range-min="1" data-val-required="Le champ Délai de recyclage est requis." id="recyclingSpan" name="recyclingSpan" type="number" value="0">
                    <span class="field-validation-valid text-danger" data-valmsg-for="recyclingSpan" data-valmsg-replace="true"></span> Mois
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-md-2" for="documentType">Type de document</label>
                <div class="col-md-10">
                    <select class="form-control" data-val="true" data-val-number="Le champ id doit être un nombre." data-val-required="Le champ id est requis." id="documentType_id" name="documentType.id" style="display: none;">
                        <option value=""></option>
                        <option value="2">ypê de doc a supprimer</option>
                        <option value="3">Audit du TMB</option>
                    </select>
                    <div class="chosen-container chosen-container-single" style="width: 550px;" title="" id="documentType_id_chosen"><a class="chosen-single chosen-default" tabindex="-1"><span>Select an Option</span><div><b></b></div></a>
                        <div class="chosen-drop">
                            <div class="chosen-search">
                                <input type="text" autocomplete="off">
                            </div>
                            <ul class="chosen-results"></ul>
                        </div>
                    </div>
                    <span class="field-validation-valid text-danger" data-valmsg-for="documentType.id" data-valmsg-replace="true"></span>
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default">
                </div>
            </div>
        </div>
    </form>

    <div id="dropzone" class="dropzone dz-clickable" style="height:100px;margin-bottom: 30px">

        <div class="dz-default dz-message"><span>Drop files here to upload</span>
        </div>
    </div>

    <div>
        <a href="/Document/Document">Retourner à la liste des éléments</a>
    </div>
</div>

用js

// DropZone
Dropzone.options.dropzone = {
    paramName: "files", // The name that will be used to transfer the file
    maxFilesize: 10, // MB
    //uploadMultiple: true,
    autoProcessQueue: false,
    url: "/file/post",
    accept: function (file, done) {
        if (file.name == "justinbieber.jpg") {
            done("Naha, you don't.");
        }
        else { done(); }
    }
};

$(document).ready(function () {
    // stuff
});

Answer 1

使用 dropzone 时，可以根据以下三种方法发送额外的数据。

1. 将 dropzone 应用于带有输入字段的表单。
2. 将 dropzone 应用于具有隐藏输入字段的表单。字段的值可以用 js 填充。 ( http://www.dropzonejs.com/#tips )
3. 使用参数属性。 ( http://www.dropzonejs.com/#tips )
4. 通过 sending 事件和 formData 参数将表单数据附加到每个文件。 ( http://www.dropzonejs.com/#tips )

第一种方法似乎符合操作的需要。可以在此处找到此解决方案的指南 https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone .

请根据您的示例找到此解决方案的粗略但成功的尝试(需要检查来自浏览器开发工具的网络调用以查看发送的数据)，

http://jsbin.com/ruvedigifu/1/edit?html,js,output

示例中的 post 请求负载具有以下形式，

------WebKitFormBoundary0Mm4s3UDxfPPh1DR
Content-Disposition: form-data; name="sourcePath"

value of field1
------WebKitFormBoundary0Mm4s3UDxfPPh1DR
Content-Disposition: form-data; name="name"

value of field2
------WebKitFormBoundary0Mm4s3UDxfPPh1DR
Content-Disposition: form-data; name="reference"

value of field3
------WebKitFormBoundary0Mm4s3UDxfPPh1DR
Content-Disposition: form-data; name="null"

Create
------WebKitFormBoundary0Mm4s3UDxfPPh1DR
Content-Disposition: form-data; name="file[0]"; filename="test1.txt"
Content-Type: text/plain


------WebKitFormBoundary0Mm4s3UDxfPPh1DR--

更新 - 基于更复杂的形式

请在这里找到一个工作示例，

http://jsbin.com/zobevazega/1/edit?html,js,output

代码，

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.js"></script>
</head>
<body>
<div class="main">
    <h2>Create</h2>
    <form action="/" enctype="multipart/form-data" method="post" novalidate="novalidate" id="dropzone" class="dropzone dz-clickable" style="height:100px;margin-bottom: 30px">
        <div class="form-horizontal">
            <hr>
            <input name="__RequestVerificationToken" type="hidden" value="qvsqgYhMtW6Tc_Cn5st61PPI1jULgz6pMB9iGZS2FPTAyR8HPSDJII0x_Oj0nuTFHrlvwl2HDA3s4sllfOSVDMXFyUnsCeVjxruyGN5goirG73BmfqV6K868Ucj9DN5Tsbssisp-7iiHzSoYCmVQGw2">

            <div class="form-group">
                <label class="control-label col-md-2" for="sourcePath">Source</label>
                <div class="col-md-10">
                    <input class="form-control text-box single-line" data-val="true" data-val-required="Le champ Source est requis." id="sourcePath" name="sourcePath" type="text" value="">
                    <span class="field-validation-valid text-danger" data-valmsg-for="sourcePath" data-valmsg-replace="true"></span>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-md-2" for="name">Nom</label>
                <div class="col-md-10">
                    <input class="form-control text-box single-line" data-val="true" data-val-required="Le champ Nom est requis." id="name" name="name" type="text" value="">
                    <span class="field-validation-valid text-danger" data-valmsg-for="name" data-valmsg-replace="true"></span>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-md-2" for="reference">Référence</label>
                <div class="col-md-10">
                    <input class="form-control text-box single-line" data-val="true" data-val-required="Le champ Référence est requis." id="reference" name="reference" type="text" value="">
                    <span class="field-validation-valid text-danger" data-valmsg-for="reference" data-valmsg-replace="true"></span>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-md-2" for="isActive">Document actif?</label>
                <div class="col-md-10">
                    <div class="checkbox">
                        <input class="check-box" data-val="true" data-val-required="Le champ Document actif? est requis." id="isActive" name="isActive" type="checkbox" value="true">
                        <input name="isActive" type="hidden" value="false">
                        <span class="field-validation-valid text-danger" data-valmsg-for="isActive" data-valmsg-replace="true"></span>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-md-2" for="recyclingSpan">Délai de recyclage</label>
                <div class="col-md-10">
                    <input class="form-control text-box single-line" data-val="true" data-val-number="Le champ Délai de recyclage doit être un nombre." data-val-range="Le champ Délai de recyclage doit être compris entre 1 et 999." data-val-range-max="999" data-val-range-min="1" data-val-required="Le champ Délai de recyclage est requis." id="recyclingSpan" name="recyclingSpan" type="number" value="0">
                    <span class="field-validation-valid text-danger" data-valmsg-for="recyclingSpan" data-valmsg-replace="true"></span> Mois
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-md-2" for="documentType">Type de document</label>
                <div class="col-md-10">
                    <select class="form-control" data-val="true" data-val-number="Le champ id doit être un nombre." data-val-required="Le champ id est requis." id="documentType_id" name="documentType.id" style="display: none;">
                        <option value=""></option>
                        <option value="2">ypê de doc a supprimer</option>
                        <option value="3">Audit du TMB</option>
                    </select>
                    <div class="chosen-container chosen-container-single" style="width: 550px;" title="" id="documentType_id_chosen"><a class="chosen-single chosen-default" tabindex="-1"><span>Select an Option</span><div><b></b></div></a>
                        <div class="chosen-drop">
                            <div class="chosen-search">
                                <input type="text" autocomplete="off">
                            </div>
                            <ul class="chosen-results"></ul>
                        </div>
                    </div>
                    <span class="field-validation-valid text-danger" data-valmsg-for="documentType.id" data-valmsg-replace="true"></span>
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default">
                </div>
            </div>
        </div>
    </form>



    <div>
        <a href="/Document/Document">Retourner à la liste des éléments</a>
    </div>

</div>

</body>
</html>

js

Dropzone.options.dropzone = { 
  url:"/",
  // 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.
   console.log(this.element); this.element.querySelector("input[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
    });
  }

};

请求载荷

------WebKitFormBoundaryWtbOVsPX2XBRTti4
Content-Disposition: form-data; name="__RequestVerificationToken"

qvsqgYhMtW6Tc_Cn5st61PPI1jULgz6pMB9iGZS2FPTAyR8HPSDJII0x_Oj0nuTFHrlvwl2HDA3s4sllfOSVDMXFyUnsCeVjxruyGN5goirG73BmfqV6K868Ucj9DN5Tsbssisp-7iiHzSoYCmVQGw2
------WebKitFormBoundaryWtbOVsPX2XBRTti4
Content-Disposition: form-data; name="sourcePath"

a
------WebKitFormBoundaryWtbOVsPX2XBRTti4
Content-Disposition: form-data; name="name"

b
------WebKitFormBoundaryWtbOVsPX2XBRTti4
Content-Disposition: form-data; name="reference"

c
------WebKitFormBoundaryWtbOVsPX2XBRTti4
Content-Disposition: form-data; name="isActive"

false
------WebKitFormBoundaryWtbOVsPX2XBRTti4
Content-Disposition: form-data; name="recyclingSpan"

23
------WebKitFormBoundaryWtbOVsPX2XBRTti4
Content-Disposition: form-data; name="documentType.id"


------WebKitFormBoundaryWtbOVsPX2XBRTti4
Content-Disposition: form-data; name="null"


------WebKitFormBoundaryWtbOVsPX2XBRTti4
Content-Disposition: form-data; name="null"

Create
------WebKitFormBoundaryWtbOVsPX2XBRTti4
Content-Disposition: form-data; name="file[0]"; filename="test1.txt"
Content-Type: text/plain


------WebKitFormBoundaryWtbOVsPX2XBRTti4--