2015-07-20 96 views
2

好的,这是场景。我已经有一个表单有一些输入字段,一些单选按钮和一个input type=file。有一个使用AJAX提交整个表单的按钮。在AJAX提交的现有表单中,Dropzone.js如何?

一切工作正常,直到我决定改变input type=file与更看中DropZone.js

现在我有以下的HTML代码(在此示例):

<form enctype="multipart/form-data" id="test_form" name="test_form" class="form uniformForm"> 
     <input class="form-control" type="text" value="" name="a-name" id="a-name" />    
     <label for="a-name">Field Name</label> 

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

<button class="btn btn-primary btn-large" id="submitForm"> Submit </button> 

我有下面的JS(jQuery的),太:

$("button#submitForm").click(function(){ 
    var fd = new FormData(document.getElementById("test_form")); 
    fd.append("label", "WEBUPLOAD"); 
    $.ajax({ 
     type: "POST", 
     url: "create_form.php", 
     data: fd, 
     enctype: 'multipart/form-data', 
     processData: false, // tell jQuery not to process the data 
     contentType: false, // tell jQuery not to set contentType 
    }); 
}); 

$("div#my-awesome-dropzone").dropzone({ 
    url: "#", 
    paramName: "creative_file", 
    maxFilesize: 1, 
    autoProcessQueue: false 
}); 

在Dropzone.js的文档说悬浮窗格看起来像<input type="file" name="file" />。唯一的区别是我想将输入名称重命名为creative_file。

我有2个问题。

1)这是行不通的。当按提交按钮时,我已经打开FIREBUG,并检查它作为POST发送的内容。它发送除文件之外的所有内容。没有creative_file,根本没有文件。

2)如果终于想出了如何使它工作,有没有什么办法让这个实现回退,特别是对于iOS或Android设备?

回答

0

1)

 $("#salvar").on('click',function(e) {   
      if ($("#psl_titulo").val() == "") { 
       alert('Empty'); 
       } else { 
       e.preventDefault(); 
       if (myDropzone.getQueuedFiles().length > 0) { 
        myDropzone.processQueue(); 
        } else { 
        $("#my-awesome-dropzone").submit(function(e) 
        { 
         var postData = $(this).serializeArray(); 
         var formURL = $(this).attr("action"); 
         $.ajax(
         { 
          url : formURL, 
          type: "POST", 
          data : postData, 
          success:function(data, textStatus, jqXHR) 
          { 
           window.location.href = url_redirect; 
          }, 
          error: function(jqXHR, textStatus, errorThrown) 
          { 
           alert('Ocorreu um erro ao salvar ao enviar os dados. Erro: ' + textStatus);  
          } 
         }); 
         e.preventDefault(); 
        }); 
        $("#my-awesome-dropzone").submit(); 
       } 
      }   
     });