2012-08-06 4 views
0

Я загружаю изображения с помощью ajax и php. Мой код отлично работает в firefox. Но в I.E это не работает!Загрузка файла Ajax не работает в 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!"; 
} 
?> 

В светлячок файловые загрузки совершенно и предупреждение появляется, но в то есть ничего не происходит!

+0

Wich IE версия? – Oussama

+2

Если вы используете jQuery, я бы рекомендовал использовать это, чтобы связывать события, а не blah.addEventListener ('click') ... вы могли бы сделать $ ('blah'). On ('click', function() {}) ....., пусть jquery обрабатывает этот бизнес для вас – Dale

+0

Я использую IE 9. – MJQ

ответ

3

На странице Примеры формы плагина

Браузеры которые поддерживают XMLHttpRequest Level 2 будет иметь возможность загружаемых файлов легко.

IE не поддерживает XMLHttpRequest Level 2.

EDIT:

Хорошо, это, похоже, не является проблемой Ajax, так как плагин использует IFrame запасной вариант. Вы, возможно, потребуется реорганизовать яваскрипта код

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

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

Но как примечание стороны, падение файл также не доступен в IE. Таким образом, он работает, только если вы выберите файл вручную в IE. И скрытый выбор файла не позволит пользователю выбрать файл. Выявление события клика из javascript на входе файла также невозможно, вам нужно перейти с прозрачным вводом файла.

+0

Ну! Когда я не использую style = "display: none" и отправлю форму, нажав кнопку, она работает нормально. Но вызывая событие click в событии изменения fileinput, оно не работает! Итак, уровень XMLHttpRequest Level 2 работает нормально! – MJQ

+1

Документы находятся здесь: https://github.com/malsup/form/#file-uploads – hakre

+0

Нет, когда вы нажимаете кнопку отправки в форме, форма представляется как обычно браузером (POST multipart request), а не by ajax. – DanielB

Смежные вопросы