我正在使用ajax和php上传图像。我的代码在火狐中运行良好。但是在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中什么都没有发生!
从表单插件的示例页面
支持 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事件也是不可能的,你必须使用透明的文件输入。