2015-07-20 22 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(); 
       } 
      }   
     });