dropzone.js 文件上传问题

Question

我第一次在另一个表单中使用 dropzone.js...所以两个表单不能嵌套，我删除了 dropzone 的表单：

html sn-p:

<form id="addproduct" name="addproduct" action="receiveAddForm" method="post" enctype="multipart/form-data">
  <fieldset class="form-horizontal">
    <div class="form-group">
      <div class="col-sm-2">
        <small class="text-navy"><b>* Campos Obligatorios</b></small>
      </div>
    </div>
    <div class="form-group"><label class="col-sm-2 control-label">Nombre (Modelo) *:</label>
      <div class="col-sm-10"><input name="name" type="text" class="form-control"></div>
    </div>
  </fieldset>

  <div class="dropzone dropzone-previews" id="my-awesome-dropzone"></div>
</form>

js sn-p:

Dropzone.options.myAwesomeDropzone = {
        autoProcessQueue: false,
        uploadMultiple: true,
        parallelUploads: 100,
        maxFiles: 3,
        addRemoveLinks: true,
        maxFilesize: 10,
        url: 'receiveAddForm',

        init: function() {
            var myDropzone = this;                

            $("#submit_form").click(function (e) {
                e.preventDefault();
                e.stopPropagation();
                myDropzone.processQueue();
            });

            this.on("sendingmultiple", function() {
            });
            this.on("successmultiple", function(files, response) {
            });
            this.on("errormultiple", function(files, response) {
            });

            this.on("maxfilesexceeded", function(file){
                // alert("No more files please!");
            });

            this.on("uploadprogress", function(file, progress) {
                console.log("File progress", progress);
            });
        }
    }

所以在服务器端，我在回显 $_FILES 后得到了这个：

array (size=1)
'files' => 
  array (size=5)
    'name' => string '' (length=0)
    'type' => string '' (length=0)
    'tmp_name' => string '' (length=0)
    'error' => int 4
    'size' => int 0

这里似乎有什么问题？我的 php.ini 在上传最大文件大小、内存限制等方面设置为 1000MB...任何帮助将不胜感激！

Answer 1

'error' => int 4 表示尚未上传任何文件，我认为这是因为您提交的表单就像是常规表单一样，如果您想在常规表单中包含 dropzone，我认为您不能以常规方式提交表单并将放置在 dropzone 元素中的文件附加到其上，或者至少没有简单的方法可以做到这一点，一种解决方案可能是将文件编码为 base64，然后将编码的字符串添加到输入发送。

但我认为一个简单的方法是使用 dropzone 发送表单并使用 javascript 将输入值附加到请求中，这里是通用示例。

html:

<form id="addproduct">
    <label>Input 1: </label>
    <input type="text" name="input1">
    <label>Input 2: </label>
    <input type="text" name="input2">
    <div id="myAwesomeDropzone" class="dropzone"></div>
</form>
<button type="button" id="submit_form">Submit</button>

js：

Dropzone.options.myAwesomeDropzone = {
    url: 'receiveAddForm',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 3,
    maxFiles: 3,
    init: function () {
        var myDropzone = this;
        $('#submit_form').on("click", function() {
            myDropzone.processQueue();
        });
        this.on("sending", function(file, xhr, formData){
            $('#addproduct').find('input').each(function() {
                formData.append( $(this).attr('name'), $(this).val() );
            });
        });
        this.on("success", function(file, response) {
            console.log(response);
        });
        this.on("completemultiple", function(files) {
            // Here goes what you want to do when the upload is done
            // Redirect, reload , load content ......
        });
    },

};

receiveAddForm (php):

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') 
{
    echo "RECEIVED ON SERVER: \n";
    print_r($_FILES);
    print_r($_POST);
}

服务器文件只是打印服务器上接收到的数据，所以你可以在浏览器控制台中看到它。我省略了引导类和元素只是为了显示相关部分，但你可以添加它们没有问题。

Answer 2

要在另一个表单中有一个 dropzone，您可以在 class="dropzone" 的表单中放置一个 div，并将其转换为 dropzone 元素，如下所示：

Dropzone.autoDiscover = false;

var myDropzone = new Dropzone("#my-awesome-dropzone", {
  autoProcessQueue: false,
  url: "receiveAddForm",
  // other options
});

那么你可以像这样调用事件：

myDropzone.on("addedfile", function(file) {
  console.log("File added:", file.name);
});

jsfiddle 使用您的表单： fiddle