dropzone.js文件上传时遇到问题 [英] Trouble with dropzone.js file upload

问题描述

我第一次在另一种表单中使用dropzone.js ...因为无法嵌套两个表单，所以我删除了dropzone的表单:

I'm using for the first time dropzone.js inside another form...so as two forms can't be nested, I removed dropzone's form:

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之后得到了这个信息:

so in server side I'm getting this after echoing $_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，将不胜感激！

what seems to be the problem here? my php.ini is set to 1000MB in upload max file size, memory limit and so on... any help would be appreciatted!

推荐答案

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

The 'error' => int 4 means that no file has been uploaded, i think this is because you are submitting the form like if it was a regular form, if you want to include dropzone inside a regular form i don't think you can submit the form the regular way and attach to it the files dropped in the dropzone element, or at least there is no simple way to do it, one solution could be to encode the file in base64 and then add the encoded string to an input to send.

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

But an easy one I think is to send the form using dropzone and append the input values to the request using javascript, here generic example.

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):

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

服务器文件仅打印服务器上接收到的数据，因此您可以在浏览器控制台中看到它.我省略了引导程序类和元素，只是为了显示相关部分，但是您可以毫无问题地添加它们.

The server file just prints the data received on the server, so you can see it in browsers console. I omitted bootstrap classes and elements only to show the relevant part, but you cand add them no problem.

这篇关于dropzone.js文件上传时遇到问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！