Dosya Yükleme ve Bırakma Dosya Yükleme

Question

Web uygulamasında <input type="file" /> html etiketini kullanarak dosya yüklemeyi kullanıyorum. Özelliğim dosya seçiciden bir dosya seçip dosyayı göndererek işe yarıyor, ancak şimdi sürükle ve bırak olayları üzerine bir dosya yüklemek istiyorum, yani kullanıcı bilgisayarındaki bazı konumlardan bir dosyayı sürükler ve belirli bir yere indirdiğinde web sayfamdaki bölüm, dosya yüklenmeye başlar.

Şimdiye kadar

function drop(evt) 
    { 
     evt.stopPropogation(); 
      evt.preventDefault(); 

     if (containsFiles(evt)) 
     { 
     var files = evt.dataTransfer.files; 
     var count = files.length; 

     // Only call the handler if 1 or more files was dropped. 
     if (count > 0) 
      // upload files 
     } 
     } 
    } 

tarafından açılan olaydan dosyalarını okumak başardı ama nasıl bu dosya yükleyebilir? Güvenlik nedeniyle input type = file değerini değiştiremiyorum. Peki bu dosyaları servletime iletmek için ne yapabilirim?

Answer 1

FormData'u kullanmalısınız (IE desteğine dikkat edin).

damla sen FormData nesne oluşturmak ve url oluşturmak, sonra da SONRASI içine verileri eklemek gerekir olur. eşzamansız yöntemidir ve sayfanızı yeniden yüklemez.

function drop(evt) { 
    evt.stopPropogation(); 
    evt.preventDefault(); 

    var files = evt.dataTransfer.files; 
    if (files.length > 0) { 
    var form = new FormData(); 

    for(var i = 0; i < files.length; ++i) { 
     var file = evt.dataTransfer.files[i]; 
     form.append('image_' + i, file, file.name); 
    } 

    var req = new XMLHttpRequest(); 
    req.open('POST', '/pathToPostData', true); 
    req.onload = function(evt) { 
     console.log(req.responseText); 
    } 
    req.send(form); 
    } 
} 

Ben yalnızca Chrome ve Firefox'ta test ettik Dikkat, IE9 muhtemelen işe yaramaz ama bunu test eğer IE10, bize lütfen bildirmeniz gerekir. ,

Answer 2

Sana Dropzone.js

Ben henüz denemedim için beğenme bir şey istiyorum inanıyorum, ama bunu çalıştıran bir web sitesine dosyaların kolay sürükle ve bırak sağlayan bir kütüphane var v3.0, jQuery'yi kullanmaya gerek kalmadan gelir.