ドラッグアンドドロップで画像をアップロードするには？

Question

は、ここに私のコードです：私は、コンテナをクリックしたとき

$(".modal-dropzone-img").click(function() { 
    $(this).siblings(".upload_image").trigger("click"); 
}) 

$('.upload_image').on('change', function() { 
    var files = $(this)[0].files; 
    processFileUpload(files, $(this).closest('form')); 
    return false; 
}); 

$('.modal-dropzone-img').on('drop dragdrop', function (e) { 
    var files = e.originalEvent.dataTransfer.files; 
    processFileUpload(files, $(this).closest('form')); 
    return false; 
}); 

function processFileUpload(droppedFiles, frm) { 
    var uploadFormData = new FormData(frm[0]); 
    uploadFormData.append("file", droppedFiles); 
    console.log(droppedFiles); 

    $.ajax({ 
     url: base_url + frm.attr('action'), 
     type: frm.attr('method'), 
     data: uploadFormData, 
     cache: false, 
     contentType: false, 
     processData: false, 
     success: function (arr) { 
      // File Uploaded 
     } 
    }); 
} 

私のコードは、同様に動作しますが、私はコンテナに画像をドラッグして、そこにそれを残すとき、それは動作しません。どうしましたか？

は console.log(droppedFiles);の結果は、このことができます両方のケース （クリック、ドラッグ・アンド・ドロップ）

Answer 1

(function(window) { 
 
    function triggerCallback(e, callback) { 
 
     if(!callback || typeof callback !== 'function') { 
 
     return; 
 
     } 
 
     var files; 
 
     if(e.dataTransfer) { 
 
     files = e.dataTransfer.files; 
 
     } else if(e.target) { 
 
     files = e.target.files; 
 
     } 
 
     callback.call(null, files); 
 
    } 
 
    function makeDroppable(ele, callback) { 
 
     var input = document.createElement('input'); 
 
     input.setAttribute('type', 'file'); 
 
     input.setAttribute('multiple', true); 
 
     input.style.display = 'none'; 
 
     input.addEventListener('change', function(e) { 
 
     triggerCallback(e, callback); 
 
     }); 
 
     ele.appendChild(input); 
 
     
 
     ele.addEventListener('dragover', function(e) { 
 
     e.preventDefault(); 
 
     e.stopPropagation(); 
 
     ele.classList.add('dragover'); 
 
     }); 
 

 
     ele.addEventListener('dragleave', function(e) { 
 
     e.preventDefault(); 
 
     e.stopPropagation(); 
 
     ele.classList.remove('dragover'); 
 
     }); 
 

 
     ele.addEventListener('drop', function(e) { 
 
     e.preventDefault(); 
 
     e.stopPropagation(); 
 
     ele.classList.remove('dragover'); 
 
     triggerCallback(e, callback); 
 
     }); 
 
     
 
     ele.addEventListener('click', function() { 
 
     input.value = null; 
 
     input.click(); 
 
     }); 
 
    } 
 
    window.makeDroppable = makeDroppable; 
 
    })(this); 
 
    (function(window) { 
 
    makeDroppable(window.document.querySelector('.demo-droppable'), function(files) { 
 
    
 
     var output = document.querySelector('.output'); 
 
     output.innerHTML = ''; 
 
     for(var i=0; i<files.length; i++) { 
 
     if(files[i].type.indexOf('image/') === 0) { 
 
      output.innerHTML += '<img width="200" src="' + URL.createObjectURL(files[i]) + '" />'; 
 
     } 
 
     output.innerHTML += '<p>'+files[i].name+'</p>'; 
 
     } 
 
    }); 
 
    })(this);

.demo-droppable { 
 
    background: #08c; 
 
    color: #fff; 
 
    padding: 100px 0; 
 
    text-align: center; 
 
    } 
 
    .demo-droppable.dragover { 
 
    background: #00CC71; 
 
    }

<div class="demo-droppable"> 
 
    <p>Drag files here or click to upload</p> 
 
</div> 
 
<div class="output"></div>

希望のために良いと同じようだと指摘しました。