html5 dragover不工作在IE 5.5到IE 8

我知道html5 dragover不支持除IE 9以外的IE瀏覽器。我複製粘貼我的js文件代碼，它與Chrome/Mozilla一起使用圖像拖放但不工作在IE中。我需要一個適用於所有瀏覽器的解決方案。例如，從js中刪除dragover函數，讓我知道我可以如何給圖像路徑（硬編碼）或使用簡單的文件上傳。感謝並等待迴應。html5 dragover不工作在IE 5.5到IE 8

jQuery(function($) { 
    var sourceImg = $('<img>')[0], 
    description = $('#description'), 
    sourceCanvas = $('#source')[0], 
    sourceCtx = sourceCanvas.getContext('2d'), 
    compressedCanvas = $('#compressed')[0], 
    compressedCtx = compressedCanvas.getContext('2d'), 
    compressedOverlayCanvas = $('#compressedOverlay')[0], 
    compressedOverlayCtx = compressedOverlayCanvas.getContext('2d'), 
    all = $('canvas'), 
    quality = 88, 
    scale = 10; 

function analyzeImage(image){ 
    all.attr('width', image.width); 
    all.attr('height', image.height); 
    sourceCtx.drawImage(image, 0, 0); 
    var sourceData = sourceCtx.getImageData(0, 0, image.width, image.height), 
     compressed = $('<img>'); 
    $('<img>') 
     .on('load', function() { 
      compressedCtx.drawImage(this, 0, 0); 
      var compressedData = compressedCtx.getImageData(0, 0, image.width, image.height), 
       data0 = sourceData.data, 
       data1 = compressedData.data; 

      for(var i = 0, l = data0.length; i < l; i+=4) { 
       for(var j = 0; j < 3; j++) { 
        var error = Math.abs(data0[i+j]-data1[i+j]); 
        data0[i+j] = error*scale; 
       } 
      } 
      compressedCtx.putImageData(sourceData, 0, 0); 
      compressedOverlayCtx.drawImage(compressedCanvas, 0, 0); 
      $('#description').fadeOut('slow'); 
      $('#results').show(); 
     }).attr('src', sourceCanvas.toDataURL('image/jpeg', quality*0.01)); 
} 

$('html') 
    .on('dragover', function(e) {e.preventDefault(); return false;}) 
    .on('drop', function(e) { 
     var files = e.originalEvent.dataTransfer.files; 
     if (files.length > 0) { 
      var file = files[0]; 
      if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) { 
       var reader = new FileReader(); 
       // Note: addEventListener doesn't work in Google Chrome for this event 
       reader.onload = function (evt) { 
        sourceImg.src = evt.target.result; 
       }; 
       reader.readAsDataURL(file); 
      } 
     } 
     return false; 
    }); 

$('input').on('change', function() { 
     $(this).next('.value').text($(this).val()); 
     quality = document.forms[0].quality.value * 1; 
     scale = document.forms[0].scale.value * 1; 
     if(sourceImg.src) analyzeImage(sourceImg); 
    }).change(); 

$(sourceImg) 
    .on('error', function() { alert('something went wrong when loading the image'); }) 
    .on('load', function() { 
     _gaq.push(['_trackEvent', 'iela', 'imageAnalyzed']); 
     analyzeImage(sourceImg); 
    });

}）;

來源

2012-11-22 Samad Nomi

實際上，自版本5.5或6以來，Internet Explorer支持本機拖放。它由Microsoft在1999年指定。HTML5接管API（不幸）。這兩個鏈接，會給你如何使用本機拖放了堅實的解釋是：

背景資料：http://msdn.microsoft.com/en-us/library/ms537658%28VS.85%29.aspx
一個跨瀏覽器的解決方案：http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/

我寫了一個德國一篇關於1.5年前德國網絡雜誌拖放HTML5的文章。我創建了一個crossbrowser演示。源代碼在github上，但用德語評論過：https://raw.github.com/tjunghans/DnD-Webstandards/master/public/article-beispiel.html

我的建議是使用庫進行拖放操作，如http://jqueryui.com/draggable/。這很容易，並會減少頭痛。

來源

2012-11-22 22:40:38

感謝您的回答。你可以告訴我可以從html5 dragover獲取字符串中的文件路徑嗎？ –

你能提供HTML，CSS，JavaScript和我可能需要的任何圖像，最好在http://jsfiddle.net/？ –

你可以讓IE 8和更低的模擬HTML5拖放。當你這樣做，那麼你可以使用HTML5拖放事件看這個答案的一個職位（忽略了問題的標題頁面打開時）：

https://stackoverflow.com/a/15867951/178550

在本質上，你所需要的監聽「selectStart」事件並調用dragDrop（）函數來啓動事物。我建議您使用Modernizr，以便IE 9及以上版本，支持HTML 5拖放的Opera，Chrome和FireFox不需要此解決方法，不要嘗試使用它。這裏的一個問題/答案張貼有關拖放的Modernizr：

Detecting HTML5 Drag And Drop support in javascript

來源

2014-09-19 20:04:18 Phil

html5 dragover不工作在IE 5.5到IE 8

回答

相關問題