Question

我第一次在另一个表单中使用dropzone.js ...因此，两个表单无法嵌套，我删除了dropzone的形式：

html片段：

<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片段：

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);
}

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

Answer 2

要在另一个表单中放置一个dropzone，你可以在表单中放入一个div =＆＃34; dropzone＆＃34;并将其转换为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 with your form： fiddle

dropzone.js文件上传有问题

2 个答案: