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

Question

通过表单拖动，拖放或选择文件时，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); 

Answer 1

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

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

通过IE9和其他所有现代浏览器都支持

..

Answer 2

什么是错的与你的图像（S），如果你得到一个未定义的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>

Answer 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?的答案