JPG 和 GIF 拖放如何在 IE 9/10/11 中工作？答案

【问题标题】：How Can JPG and GIF Drag and Drop Work in IE 9/10/11?JPG 和 GIF 拖放如何在 IE 9/10/11 中工作？
【发布时间】：2015-07-22 02:12:33
【问题描述】：

通过表单拖放或选择文件时，IE 9/10/11 仅接受 JPEG 和 PNG 文件，但拒绝扩展名 JPG 和 GIF。我在下面使用的代码和演示 URL https://css-tricks.com/examples/DragAvatar/ 都有这个问题。在演示中放置 JPG 或 GIF 文件时，IE 会弹出一个标题为“来自网页的消息”的消息框，报告“仅允许图像！”

重命名 GIF 并没有帮助，虽然将 JPG 重命名为 JPEG 确实有效，但这是一种我不想让用户执行的变通方法。这是一个错误吗？拖动事件触发时是否可以重命名扩展名？可以做些什么来支持 GIF？ Chrome 和 FF 没有问题。

reader = new FileReader();
reader.onload = (function (theFile) {
    return function (event) {
        theHTML = '<img style="width: 100%;" src="' + event.target.result + '" />';
        document.getElementById('dropTarget').innerHTML = theHTML;
    };}(file));

reader.readAsDataURL(file);

【问题讨论】：

不是错误。如果我将.jpg 拖到头像放置区，您指向 css-tricks 的链接在 IE11 中对我来说效果很好。我什至可以删除一个 .gif，序列的第一个图像将成为头像（画布不支持动画 gif）。在您的应用中，尝试失败时会报告什么 file.type？
@markE 我得到一个空白文件类型。此时我已切换到检查文件头，以消除所有疑问。在stackoverflow.com/questions/18299806/… 了解 Drakes 的方法

标签： javascript jquery internet-explorer drag-and-drop html5-canvas

【解决方案1】：

我认为解决您的问题的方法是使用 html5 拖放。

http://www.w3schools.com/Html/html5_draganddrop.asp

受 IE9 和所有其他现代浏览器支持..

【讨论】：

【解决方案2】：

如果您得到一个未定义的file.type，而您应该得到某种image.* 文件类型，则您的图像有问题。

这是一个工作演示，可让您将图像拖到放置区并从中创建图像和新的画布绘图：

// dropDiv event handlers
var dropDiv=document.getElementById("dropDiv");
dropDiv.addEventListener("dragenter", handleDragEnter, false);
dropDiv.addEventListener("dragover", handleDragOver, false);
dropDiv.addEventListener("drop", handleDrop, false);
//
function handleDragEnter(e) {
  e.stopPropagation();
  e.preventDefault();
}
//
function handleDragOver(e) {
  e.stopPropagation();
  e.preventDefault();
}
//
function handleDrop(e) {
  e.stopPropagation();
  e.preventDefault();

  var dt = e.dataTransfer;
  var files = dt.files;

  handleFiles(files);
}

//
function handleFiles(files) {

  for (var i=0;i<files.length;i++) {
    var file = files[i];
    var imageType = /image.*/;

    if (!file.type.match(imageType)) {
      continue;
    }

    var img = document.createElement("img");
    img.classList.add("obj");
    img.file = file;
    preview.appendChild(img);

    var reader=new FileReader();
    reader.onload=(function(aImg){
      return function(e) {
        aImg.onload=function(){
          var canvas=document.createElement("canvas");
          var ctx=canvas.getContext("2d");
          canvas.width=aImg.width;
          canvas.height=aImg.height;
          ctx.drawImage(aImg,0,0);
          document.body.appendChild(canvas);
        }
        // e.target.result is a dataURL for the image
        aImg.src = e.target.result;
      }; 
    })(img);
    reader.readAsDataURL(file);

  } // end for

} // end handleFiles

function calcNewAspect(imgWidth, imgHeight, maxWidth, maxHeight) {
  var ratio = Math.min(maxWidth/imgWidth,maxHeight/imgHeight);
  return {width:imgWidth*ratio,height:imgHeight*ratio };
}

body{ background-color: ivory; }
canvas{border:1px solid red;}
#dropDiv{border:1px solid blue; width:300px;height:300px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Drag an image from desktop to blue dropzone.</h4>
<div id="dropDiv"></div>
<div id="preview"></div>

【讨论】：

谢谢@markE。我在 4 台不同的机器上运行了代码 sn-p，它在 Vista 上运行 IE 9、在 Windows Server 2003 上运行 IE 9 和在 Windows 7 上运行 IE 11 时失败了。只有 Windows Server 2012 上的 IE 11 工作。我必须坚持阅读幻数来肯定地识别 MIME，而不是依赖 blob.type 测试兼容性。问题不在于文件。问题是测试。
是的，IE9 不支持 FileReader（在我的 sn-p 中使用）。 IE10支持FileReader，我可以在Win8的IE10+上成功拖一张jpg。另外，当您说“通过表单选择文件”时，这是否意味着您正在使用下载属性？下载属性直到IE12-Edge才可用？ PS。感谢您在 Windows Server(s) 上测试您的应用程序 - 不会有多少客户端来自该平台，但您是彻底的！ :-)
实际上，@markE，对于那些不喜欢拖放的人来说，没有表格，只有一个文件类型的输入元素。在 Win8/Server2012 之前禁用 Windows 更新可能会阻止对操作系统的修补程序。我不打算深入研究标头嗅探，但现在欣赏该方法的可靠性和温和的硬化效果 - 并不是说黑客无法重新编写标头。不过没关系，因为我不上传源代码，而是从画布上裁剪的副本。

【解决方案3】：

问题既不在于使用的 FileReader 代码，也不在于所选的文件。该错误是由在 Windows Vista 或 7 上运行的 IE 9/10/11 中测试 file.type.match('image.*') 引起的。JPG 和 GIF 文件向 JavaScript 报告为类型空白。要解决这个问题，忽略文件的扩展名，直接读取文件头来确定它的 MIME。

要读取文件头，请参阅 Drakes 的答案How to check file MIME type with javascript before upload?

【讨论】：