HTML5 - 將JPEG從瀏覽器拖放到瀏覽器

Question

我見過很多示例，如何實現將&從桌面拖放到我的瀏覽器中。最近我聽說也可以將JPEG從另一個HTML網站拖入我的瀏覽器並加載JPEG。我怎麼能意識到這一點？

有它事做：

void addElement(
    in Element element 
); 

Answer 1

如果您正在使用jQuery，你可以在這裏找到一種方法：https://github.com/blueimp/jQuery-File-Upload/wiki/Drag-and-drop-uploads-from-another-web-page

這裏是代碼做到這一點：

<script src="https://raw.github.com/betamax/getImageData/master/jquery.getimagedata.min.js"></script> 
<script> 
$(document).bind('drop dragover', function (e) { 
    // Prevent the default browser drop action: 
    e.preventDefault(); 
}); 
$(document).bind('drop', function (e) { 
    var url = $(e.originalEvent.dataTransfer.getData('text/html')).filter('img').attr('src'); 
    if (url) { 
     $.getImageData({ 
      url: url, 
      success: function (img) { 
       var canvas = document.createElement('canvas'); 
     canvas.width = img.width; 
     canvas.height = img.height; 
       if (canvas.getContext && canvas.toBlob) { 
        canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height); 
        canvas.toBlob(function (blob) { 
         $('#fileupload').fileupload('add', {files: [blob]}); 
        }, "image/jpeg"); 
       } 
      } 
     }); 
    } 
}); 
</script>