1

我知道除了 IE 9 之外，IE 不支持 html5 dragover。我正在复制粘贴我的 js 文件代码，它可以与 Chrome / Mozilla 一起使用图像拖放功能，但不能在 IE 中使用。我需要一个适用于所有浏览器的解决方案。例如从 js 中删除 dragover 功能，让我知道如何提供图像路径（硬编码）或使用简单的文件上传。感谢并等待回复。 

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

});

4

2 回答 2

1

实际上，Internet Explorer 从 5.5 或 6 版开始就支持 Native Drag and Drop。它是由 Microsoft 在 1999 年指定的。HTML5 照原样接管了 API（不幸的是）。以下两个链接将为您提供有关如何使用 Native 拖放的可靠解释：

1.5 年前，我为一家德国网络杂志写了一篇关于 HTML5 拖放的德语文章。我创建了一个跨浏览器演示。源代码在 github 上，但用德语评论：https ://raw.github.com/tjunghans/DnD-Webstandards/master/public/article-beispiel.html

我的建议是使用诸如http://jqueryui.com/draggable/之类的拖放库。它更容易，并且会给您带来更少的头痛。

于 2012-11-22T22:40:38.350 回答
0

您可以使 IE 8 及更低版本模仿 HTML5 拖放。完成后，您可以使用 HTML5 拖放事件查看此帖子的答案（页面打开时忽略问题的标题）：

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

本质上，您需要监听“selectStart”事件并调用 dragDrop() 函数来开始。我推荐你使用 Modernizr，这样支持 HTML 5 拖放的 IE 9 及更高版本、Opera、Chrome 和 FireFox 不需要这个解决方法，不要尝试使用它。这里有一个关于拖放 Modernizr 的问题/答案帖子：

在 javascript 中检测 HTML5 拖放支持

于 2014-09-19T20:04:18.713 回答