Ajax 文件上传在 I.E 中不起作用答案

【问题标题】：Ajax file upload not working in I.EAjax 文件上传在 I.E 中不起作用
【发布时间】：2012-08-03 08:44:35
【问题描述】：

我正在使用 ajax 和 php 上传图片。我的代码在 Firefox 中运行良好。但在 IE 中，它不起作用！

这是我的 HTML 代码，

<!doctype html>
<head>
<title>File Upload Progress Demo #1</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<style>
body { padding: 30px }
</style>
</head>
<body>
    <h1>File Upload Progress Demo #1</h1>
        <form action="fileup.php" method="post" enctype="multipart/form-data">
        <input id="inp" type="file" name="uploadedfile" style="display:none"><br>
        <input id="btn" type="submit" value="Upload File to Server" style="display:none">
    </form>

    <div id="fileSelect" class="drop-area">Select some files</div>

<script>
(function() {

$('form').ajaxForm({

    complete: function(xhr) {
        alert(xhr.responseText);
    }
}); 

})();       


var fileSelect = document.getElementById("fileSelect"),
fileElem = document.getElementById("inp");


fileElem.addEventListener("change",function(e){
  document.getElementById('btn').click();
},false)  


fileSelect.addEventListener("click", function (e) {
  fileElem.click();
  e.preventDefault(); 
}, false);


</script>

</body>
</html>

这里是php代码，

<?php
$target_path = "images/";

$target_path = $target_path . basename( $_FILES['uploadedfile']['name']); 

if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
    echo "The file ".  basename( $_FILES['uploadedfile']['name']). 
    " has been uploaded";
} else{
    echo "There was an error uploading the file, please try again!";
}
?>

在 Firefox 中文件上传完美并出现警报，但在 IE 中没有任何反应！

【问题讨论】：

如果您使用 jQuery，我建议使用它来绑定事件，而不是 blah.addEventListener('click')... 你可以这样做 $('blah').on('click' , function(){}).....，让 jquery 为您处理该业务
我认为 Internet Explorer 不支持 XHR 上传。在 stackoverflow 上查看此响应。 stackoverflow.com/a/8899308/464064
如果你想跨浏览器上传ajax文件，你将不得不依赖一些基于flash的插件
只是想说明：github.com/malsup/form/#file-uploads 网站有一些关于支持的特定浏览器的信息，那么你怎么能说它必须与 Internet Explorer 一起使用呢？它是 MIT/GPL 许可的，没有任何保证，也不适合特定用途。如果你错过了什么，你必须添加它。这就是开源的工作原理。

标签： php html ajax internet-explorer file-upload

【解决方案1】：

来自表单插件的示例页面

支持 XMLHttpRequest Level 2 的浏览器将能够无缝上传文件。

IE 不支持 XMLHttpRequest Level 2。

编辑：

好的，这似乎不是 Ajax 问题，因为该插件使用 iframe 回退。您可能需要重构您的 javascript 代码

$(function(){
    $('form').ajaxForm({
        complete: function(xhr) {
            alert(xhr.responseText);
        }
    }); 

    $('#inp').change(function(e) {
        $('#btn').click();
    });
});

但附带说明一下，文件拖放在 IE 中也不可用。因此，只有在 IE 中手动选择文件时它才有效。隐藏文件选择将不允许用户选择文件。在文件输入上从 javascript 引发点击事件也是不可能的，您必须使用透明的文件输入。

【讨论】：

好吧！当我不使用 style="display:none" 并通过单击按钮提交表单时，它工作正常。但是在文件输入的更改事件中调用点击事件，它不起作用！所以，XMLHttpRequest Level 2 似乎工作正常！
不，当你点击表单中的提交按钮时，表单是由浏览器（POST multipart request）照常提交，而不是ajax。
从这个链接stackoverflow.com/questions/11776351/…接受的答案中运行IE中的代码
不要明白你上次评论的意思。它不适用于高达 IE 9 的 Ajax。您必须使用 iframe 方法或 Flash 上传器。这是一个经常讨论的问题。
不久前我不得不实现一个样式按钮来充当“选择文件”。唯一的方法是，拥有一个样式按钮并将输入元素正好放在该按钮上方（更高的 z-index）并赋予它们 0 不透明度。这样，用户在根本看不到输入的情况下单击了输入。在onChange 我可以在表单上调用提交。