Dropzone için form isteği yerine XMLHttpRequest kullanarak http isteği nasıl gönderilir?

Question

Bilgisayarımdan dosyaları DropzoneJS kullanarak sunucuya yüklemek istiyorum. Dokümantasyon, gönderilecek bir URL içeren bir form kullanacağını söylüyor. Ancak bunun yerine javascript dosyamdaki dosyaları almak istiyorum, böylece sunucuya bir XMLHttpRequest gönderebilir ve aynı gönderiden yanıt alabilirim. Sorun dropzone için URL gerekiyor nedense (I URL ile benim JavaScript dosyasında

Dropzone.autoDiscover = false; 

koymak bile, hata gitti ama dropzone çalışması mümkün değildir). Form eylem URL'sini tamamıyla bir araya getirmenin bir yolu var mı? İki farklı http isteği yapmak istemiyorum.

IE10 yana

<form method="post" enctype="multipart/form-data" id="my-awesome-dropzone" class="dropzone"></form> 

Answer 1

, böyle, XHR2 kullanarak dosyaları yüklemek mümkündür:

if (new XMLHttpRequest().upload) { 
    var form = document.getElementById('my-awesome-dropzone'); 
    var fileSelect = document.getElementById('file-select'); 
    var uploadButton = document.getElementById('upload-button'); 
    form.onsubmit = function(event) { 
    event.preventDefault(); 
    // Update button text. 
    uploadButton.innerHTML = 'Uploading...'; 
    // Get the selected files from the input. 
    var files = fileSelect.files; 
    // Create a new FormData object. 
    var formData = new FormData(); 
    // Loop through each of the selected files. 
    for (var i = 0; i < files.length; i++) { 
     var file = files[i]; 
     // Add the file to the request. 
     formData.append('files[]', file, file.name); 
    } 
    // Set up the request. 
    var xhr = new XMLHttpRequest(); 
    xhr.open('POST', 'handler.php', true); 
    xhr.onload = function() { 
     if (xhr.status === 200) { 
     uploadButton.innerHTML = 'Done'; 
     var data = xhr.responseText 
     // do something with the response 

     } else { 
     console.log('An error occurred!'); 
     } 
    } 
    xhr.onerror = function() { 
     console.log('An error occurred!'); 
    } 
    xhr.send(formData); 
    } 
} else { 
    // browser doesn't support JS file uploading 
} 

Kaynak: http://blog.teamtreehouse.com/uploading-files-ajax

İşte form