development

입력 유형 = "파일"의 jQuery 변경 방법

big-blog 2020. 11. 13. 23:46
반응형

입력 유형 = "파일"의 jQuery 변경 방법


간단하고 우아한 API를 사용하여 jQuery를 100 % 수용하려고하는데 API와 간단한 HTML 사이에 불일치가 생겼는데 잘 모르겠습니다.

파일 입력 값이 변경 될 때마다 실행하려는 AJAX 파일 업 로더 스크립트 (올바르게 작동 함)가 있습니다. 내 작업 코드는 다음과 같습니다.

<input type="file" size="45" name="imageFile" id="imageFile" onchange="uploadFile()">

onchange이벤트를 jQuery 구현으로 변환 할 때 :

$('#imageFile').change(function(){ uploadFile(); });

결과는 동일하지 않습니다. onchange속성을 사용하면 uploadFile()예상대로 값이 변경 될 때마다 함수가 호출됩니다. 그러나 jQuery API .change()이벤트 핸들러를 사용하면 값이 처음 변경 될 때만 이벤트가 발생합니다. 그 이후의 모든 값 변경은 무시됩니다. 이것은 나에게 잘못된 것처럼 보이지만 확실히 이것은 jQuery의 감독이 될 수 없습니다.

다른 사람도 같은 문제가 발생했으며 위에서 설명한 것 이외의 문제에 대한 해결 방법이나 해결책이 있습니까?


ajax 업 로더가 입력 요소를 새로 고치고 있습니까? 그렇다면 .live () 메서드 사용을 고려해야합니다.

 $('#imageFile').live('change', function(){ uploadFile(); });

최신 정보:

jQuery 1.7 이상부터는 이제 .on ()을 사용해야합니다.

 $(parent_element_selector_here or document ).on('change','#imageFile' , function(){ uploadFile(); });

jQuery 1.7부터 .live () 메서드는 더 이상 사용되지 않습니다. .on ()을 사용하여 이벤트 핸들러를 첨부하십시오. 이전 버전의 jQuery 사용자는 .live ()보다 .delegate ()를 우선적으로 사용해야합니다. 참조 : http://api.jquery.com/on/

$('#imageFile').on("change", function(){ uploadFile(); });

파일 입력 유형에 jQuery 이벤트 핸들러를 추가하여 IE8 +가 작동하도록 할 수 없습니다. 구식으로 가서 onchange=""입력 태그에 속성을 추가해야했습니다 .

<input type='file' onchange='getFilename(this)'/>

function getFileName(elm) {
   var fn = $(elm).val();
   ....
}

편집하다:

function getFileName(elm) {
   var fn = $(elm).val();
   var filename = fn.match(/[^\\/]*$/)[0]; // remove C:\fakename
   alert(filename);
}

참고 URL : https://stackoverflow.com/questions/2721250/jquery-change-method-on-input-type-file

반응형