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

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

Проблема в том, что ваш код пытается получить доступ к элементу с идентификатором "myfile", но в вашей разметке такого элемента нет.

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

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

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