Изображение заменяет элемент ввода

Question

Я хочу создать «сценарий загрузчика изображений». Я не хочу использовать элемент ввода. При нажатии на красное изображение появится системное окно, и вы можете выбрать файл изображения. Но это не работает в IE 9.

JQuery код:

// this part of code does not work in IE9 
$('img').click(
    function(){ 
     $('#photoimg').trigger('click'); 
}); 

// this works fine 
$('#photoimg').live('change', function(){ 
    $("#preview").html(''); 
    $("#preview").html('<img src="loader.gif" alt="Uploading...."/>'); 
    $("#imageform").ajaxForm({ 
     target: '#preview', 
     success: function() { 
      alert('IMG was loaded.'); 
     } 
    }).submit(); 
}); 

HTML код:

<img id="icon" src="http://ynternet.sk/test2/close_1.jpg"> 

<form id="imageform" method="post" action='upload_file.php'> 
    <input type="file" name="photoimg" id="photoimg" /> 
</form> 
<div id='preview'> </div> 

Пример:

http://ynternet.sk/test_4/ 

Answer 1

Проблема заключается в том, что ваш код пытается для доступа к элементу с id «myfile», но ваша разметка не имеет такого элемента.

Он работал для меня как в IE9 и Chrome, когда я изменил идентификатор входа файла, чтобы соответствовать тому, что было в коде (хотя, очевидно, вы можете изменить JS, чтобы соответствовать HTML):

<input type="file" name="photoimg" id="myfile" /> 

Демо: http://jsfiddle.net/ytcXF/