Drag & Drop Dosya Yükleme

Question

Aradığım şeyi bulmak ve uygulamak için biraz uğraşıyorum.

Temel bir PHP dosya yükleyicisine sahibim, bir kullanıcı özel bir yükleme düğmesine bastığında, bir dosya seçtiğinde ve daha sonra JS'yi kullanarak, bir değişiklik olup olmadığını kontrol eder (yani bir dosyayı seçer) ve sonra formu gönderir hangi görüntü güzelce yükler.

Ayrıca şimdi istediğim, sürükleme alanı & sürükleniyor. Böylece kullanıcı bir görüntüyü kendi dosya gezginden sürükleyebilir ve belirlenen bir yere (tüm sayfadan değil) bırakabilir ve daha sonra bu formun görüntü ile otomatik olarak gönderilmesini ve aynı PHP işlemesini kullanması için düştü.

Bu mümkün ve gerçekçi midir?

Answer 1

Bu, herhangi bir üçüncü taraf eklentisi kullanmadan kesinlikle gerçekçi ve mümkündür.

function processFileUpload(droppedFiles) { 
     // add your files to the regular upload form 
    var uploadFormData = new FormData($("#yourregularuploadformId")[0]); 
    if(droppedFiles.length > 0) { // checks if any files were dropped 
     for(var f = 0; f < droppedFiles.length; f++) { // for-loop for each file dropped 
      uploadFormData.append("files[]",droppedFiles[f]); // adding every file to the form so you could upload multiple files 
     } 
    } 

// the final ajax call 

     $.ajax({ 
     url : "upload.php", // use your target 
     type : "POST", 
     data : uploadFormData, 
     cache : false, 
     contentType : false, 
     processData : false, 
     success : function(ret) { 
       // callback function 
     } 
     }); 

} 

: - Yöntem

Bırak alanını

$(".drop-files-container").bind("drop", function(e) { 
    var files = e.originalEvent.dataTransfer.files; 
    processFileUpload(files); 
    // forward the file object to your ajax upload method 
    return false; 
}); 

processFileUpload():

aşağıdaki parçacıkları size işe yarayabilir nasıl bir fikir vermelidir form örneği

<form enctype="multipart/form-data" id="yourregularuploadformId"> 
    <input type="file" name="files[]" multiple="multiple"> 
</form> 

Böyle bir şeyi başlangıç ​​noktası olarak kullanmaktan çekinmeyin. Bu tarayıcı desteği bu eklenti sen ettik burada http://caniuse.com/#feat=xhr2 Eğer ilerleme çubuğu, önizleme, animasyon gibi istedikleri ekstra ekleyebilir Tabii

...

Answer 2

Lütfen jQuery eklentisine göz atın! jQuery için çoklu dosya seçimi ile http://blueimp.github.com/jQuery-File-Upload/

Dosya Yükleme widget'ı, sürükle & damla desteği, ilerleme çubukları ve önizleme görüntüleri: Ajax dosya yükleme ve daha fazlası. Etki alanları arası, parçalanmış ve sürdürülebilir dosya yüklemelerini ve istemci tarafındaki görüntü yeniden boyutlandırmayı destekler. Standart HTML form dosya yüklemelerini destekleyen herhangi bir sunucu tarafı platformu (PHP, Python, Ruby on Rails, Java, Node.js, Go vb.) Ile çalışır.