파일 업로드시 레이블에 파일 이름 적용

Question

파일 업 로더 입력 필드가 숨겨져 있습니다. 파일을 업로드 할 수있는 클릭 가능한 요소로 레이블을 사용하여 스타일을 지정할 수 있습니다. 예를 들면 다음과 같습니다. jsFiddle

레이블의 텍스트를 변경하기위한 JS 해결 방법을 추가 했으므로 파일을 선택하면 "파일 업로드"텍스트가 실제 파일 이름으로 바뀝니다.

내 문제는 여러 파일 업 로더에서 작동하도록 내 코드를 얻는 중입니다.

HTML

<p class="hide_this"><span class="wpcf7-form-control-wrap file-02"><input type="file" name="file-02" size="40" class="wpcf7-form-control wpcf7-file" id="file-01" aria-invalid="false"></span><label for="file-01"><span>Upload a file</span></label></p> 

<p class="hide_this"><span class="wpcf7-form-control-wrap file-03"><input type="file" name="file-03" size="40" class="wpcf7-form-control wpcf7-file" id="file-02" aria-invalid="false"></span><label for="file-02"><span>Upload a file</span></label></p> 

<p class="hide_this"><span class="wpcf7-form-control-wrap file-04"><input type="file" name="file-04" size="40" class="wpcf7-form-control wpcf7-file" id="file-03" aria-invalid="false"></span><label for="file-03"><span>Upload a file</span></label></p> 

JS

$('input[type=file]').change(function(){ 
    var filename = $(this).val().split('\\').pop(); 
    var idname = $(this).attr('id'); 
    $('.'+idname).next().find('span').html(filename); 
}); 

Answer 1

이것이 당신을 위해 효과가없는 이유는 id의 불일치가 있습니다. <input>의 id을 id (관련 <span>)과 일치 시키면됩니다. 여기

업데이트 된 바이올린입니다 : https://jsfiddle.net/m7eqj9ku/1/

---

참고 : 외부 libs와 함께

Answer 2

을 : 내가 클릭 파일 업 로더 아래의 코드에 상관없이 함께, 파일 이름은 첫 번째 파일 업로드 필드 항상 웁니다 이것을 시도하십시오 $('label[for="'+idname+'"]').find('span').html(filename);