如何以拖放方式上傳圖片？

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> 

希望這可以幫助。