Question

我使用ajax和php上传图片。我的代码在firefox中工作正常。但在I.E中，它不起作用！

这是我的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中文件上传完美且警报出现，但在I.E没有任何反应！

Answer 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引发click事件也是不可能的，你必须使用透明文件输入。

Ajax文件上传在I.E中无效

1 个答案: