입력 형식 파일로 Ajax 양식 제출

Question

저는 ajax를 사용하여 PHP를 사용하여 파일을 탐색, 업로드 및 처리하는 양식을 제출하고 있습니다. 나는 표준 HTML 입력 유형 = "파일"버튼 (대부분 사람들이 그렇듯이)을 싫어하므로 결국 사용자 정의 할 수있는 다른 버튼 (id = "fileSelect")에서 표준 "찾아보기"버튼을 클릭하는 트릭을 사용했습니다. 사파리와 다른 사람들에게 잘 작동하지만 IE를 사용하면 양식을 제출하는 아약스 코드 라인이 실행되지 않습니다. 아약스 코드의 다른 요소가 실행됩니다 (경고 ("Ajax complete")가 끝나고 "$ ("# imageform "). ajaxForm ({target : '#preview'}).); " 라인 IE에서 작동하지 않습니다.

Ajax 코드 :

$(document).ready(function() 
{  
    $('#xfile').live('change', function() // when there is an even on the 'file' element (like file selected) 
    { 
     $("#preview").html(''); // clears the preview area 
     $("#preview").html('<img src="general_images/loading.gif" alt="Uploading...."/>'); // displays the loading 
     $("#imageform").ajaxForm({target: '#preview'}).submit(); 
     alert ("Ajax complete"); 
    }); 
}); 

그리고 HTML 코드 :

<div> 
<button id="fileSelect" onclick="document.getElementById('xfile').click();">Insert Picture</button> 
<form style="display: inline" id="imageform" name="imageform" action="upload_file_journal.php" method="post" target="_blank" enctype="multipart/form-data"> 
    <input style="visibility: hidden" type='file' name='xfile' id='xfile'/
</form> 

Answer 1

이 IE 9에서 작동하지 않습니다 (나는 그것이 IE 10, 11에서 작동 생각 구형).

절대 위치를 사용하여 업로드 컨트롤을 버튼 위에 놓은 다음 불투명도를 0.1로 설정하면 단추를 클릭하는 것처럼 보이지만 실제로는 입력을 클릭하면 항상 버튼 부분을 클릭하도록 파일 입력의 수퍼 크기를 지정합니다.

그래도 그렇게하는 것은 번거로운 일입니다. 희망이가 기본 입력 유형 = "파일"버튼에 의해 트리거 않다면,하지만 버튼이 fileSelect 버튼에 의해 트리거하지 않을 때