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

＆＃13;

  (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);

＆＃13;

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

＆＃13;

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

＆＃13;

希望这有帮助。

如何以拖放方式上传图片？

1 个答案: