이미지는 입력 요소를 대체합니다.

"이미지 업 로더 스크립트"를 만들고 싶습니다. 입력 요소를 사용하고 싶지 않습니다. 붉은 색 이미지를 클릭하면 시스템 창이 나타나고 이미지 파일을 선택할 수 있습니다. 그러나 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/

출처

2012-06-21 Patrik

문제가 있음 id가 "myfile"인 요소에 액세스 할 수 있지만 마크 업에는 해당 요소가 없습니다.

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

: 나는 (분명히 당신은 HTML과 일치하도록 JS를 변경할 수 있지만) 코드에서 무엇 일치하도록 파일 입력의 ID를 변경할 때 IE9와 크롬 모두 나를 위해 일한

데모 : http://jsfiddle.net/ytcXF/

출처

2012-06-21 11:05:16 nnnnnn

죄송합니다. 단지 복사/붙여 넣기 실수였습니다. 새로운 편집 및 예제를 참조하십시오. http://ynternet.sk/test_4/ – Patrik

스크립트가 jsfiddle에서 작동하지만 서버에 이미지를 업로드하지 않습니다. jsfiddle에 가입하면 이미지를 업로드 할 수 없으므로 문제를 볼 수 없습니다. – Patrik

코드의 주석은 img 클릭이 작동하지 않지만 변경 이벤트 처리기 및 업로드가 "정상적으로 작동합니다"라고 말하면서 실제로 다른 방향인지 말하고 있습니까? $ ('photoimg') 대신 $ ('# photoimg') 대신 '... (photoimg') 변경을 시도해 볼 수 있습니다. ''변경 '...'- IE9에 대해서는 확실하지 않지만, 이전 IE에서 변경 이벤트가 거품이 나지 않아'.live() '와 작동하지 않을 것입니다. – nnnnnn

이미지는 입력 요소를 대체합니다.

답변

관련 문제