2017-07-27 55 views
0

我在我的註冊表單中使用dropzoneJS。我有DropZone和一個單獨的輸入文件類型的窗體。我可以將其他輸入文本與dropzone一起發送,但輸入文件類型不會。我正在使用AJAX請求上傳文件併發送附加數據。用DropzoneJs發送一個單獨的輸入類型文件

這裏是我的形式

<form enctype="multipart/form-data"> 
    <input type="text" name="name" id="name" placeholder="Full Name" > 
    <input type="email" name="email" id="email" placeholder="Email Address" > 
    <input type="password" name="password" id="password" > 

    <input type="file" name="avatar" id="avatar" > 

    <div class="dropzone-container file_upload" id="file_upload_container"> 
     <div class="dz-message default-dropzone-text" data-dz-message> 
     <span class="text-default">Drag or click here to upload your credentials (i.e. Certificates, CV etc.)</span> 
     </div> 
     <div class="fallback"> 
      <input name="file[]" type="file" id="file" multiple required /> 
     </div> 
    </div> 
    <button type="button" id="submit">Submit</button> 
</form> 

,這裏是我的javascript代碼

Dropzone.autoDiscover = false; 
var myDropzone = new Dropzone("div.file_upload", { 
    url : sendData, 
    headers: { 
     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'), 
    }, 
    autoProcessQueue: false, 
    addRemoveLinks: true, 
    uploadMultiple: true, 
    parallelUploads: 100, 
    maxFiles: 100, 
    acceptedFiles: 'application/pdf, .doc, .docx, .pub, .jpeg, .jpg, .png, .gif, .xls, .xlsx, .ppt, .pptx', 
    maxFilesize: 500, 
    paramName: "file", 
    init: function(){ 
     $("#submit").click(function(e) { 
      e.preventDefault(); 
      e.stopPropagation(); 
      myDropzone.processQueue(); 
     }) 
     this.on("sendingmultiple", function(data, xhr, formData) { 
      formData.append("name", $("#name").val()); 
      formData.append("email", $("#email").val()); 
      formData.append("password",$('#password').val()); 
      formData.append("avatar",$('#avatar')); 
     }); 
     this.on("successmultiple", function(files, response) { 
      console.log(response); 
     }); 
     this.on("errormultiple", function(files, response) { 
      myDropzone.removeAllFiles(); 
     }); 
    } 
}); 

回答

0

好,我知道了,我試圖對象發送到API,而不是實際的文件,所以我換成

formData.append("avatar",$('#avatar')); 

formData.append("avatar",$('#avatar')[0].files[0]); 

它工作!

相關問題