jquery change - jQuery : <input type = "file"/>에서 선택한 파일 이름을 가져옵니다.




4 Answers

다음과 같이 작성하는 것만으로 간단합니다.

$('input[type=file]').val()

어쨌든 이름이나 ID 속성을 사용하여 입력 내용을 선택하는 것이 좋습니다. 그리고 이벤트로, 그것은 다음과 같이 보일 것입니다 :

$('input[type=file]').change(function(e){
  $in=$(this);
  $in.next().html($in.val());
});
event is

이 코드는 IE에서 작동해야하지만 Firefox에서는 테스트하지 않아도됩니다. 내가 원하는 것은 첨부 된 파일의 이름을 표시하는 것입니다. 어떤 도움이 필요합니까?

<html>
<head>
  <title>example</title>    
  <script type="text/javascript" src="../js/jquery.js"></script>
  <script type="text/javascript">  
        $(document).ready( function(){            
      $("#attach").after("<input id='fakeAttach' type='button' value='attach a file' />");      
      $("#fakeAttach").click(function() {            
        $("#attach").click();        
        $("#maxSize").after("<div id='temporary'><span id='attachedFile'></span><input id='remove' type='button' value='remove' /></div>");        
        $('#attach').change(function(){
          $("#fakeAttach").attr("disabled","disabled");          
          $("#attachedFile").html($(this).val());
        });        
        $("#remove").click(function(e){
          e.preventDefault();
          $("#attach").replaceWith($("#attach").clone());
          $("#fakeAttach").attr("disabled","");
          $("#temporary").remove();
        });
      })
    }); 
  </script> 
</head>
<body>
  <input id="attach" type="file" /><span id="maxSize">(less than 1MB)</span>    
</body>
</html>



가장 간단한 방법은 단순히 jquery 의 다음 줄을 사용하는 것입니다.이 방법을 사용하면 /fakepath 하지 않고 업로드 된 파일을 얻을 수 있습니다.

$('input[type=file]')[0].files[0]; // This gets the file
$('#idOfFileUpload')[0].files[0]; // This gets the file with the specified id

기타 유용한 명령은 다음과 같습니다.

파일의 이름을 얻으려면 :

$('input[type=file]')[0].files[0].name; // This gets the file name

파일의 형식을 가져 오려면 다음을 수행하십시오.

PNG를 업로드하는 경우 image/png 가 반환 image/png

$("#imgUpload")[0].files[0].type

파일의 크기 (바이트 단위)를 얻으려면 :

$("#imgUpload")[0].files[0].size

또한 on('change' 명령을 사용하지 않아도 파일을 업로드 할 수 있고 사용자가 upload 클릭하면 나열된 명령을 사용하면 언제든지 값을 가져올 수 있습니다.




<input onchange="readURL(this);"  type="file" name="userfile" />
<img src="" id="blah"/>
<script>
 function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah')
                    .attr('src', e.target.result)
                    .width(150).height(200);
        };

        reader.readAsDataURL(input.files[0]);
        //console.log(reader);
        //alert(reader.readAsDataURL(input.files[0]));
    }
}
</script>



숨겨진 재설정 버튼 추가 :

<input id="Reset1" type="reset" value="reset" class="hidden" />

재설정 단추를 클릭하여 입력을 지우십시오.

$("#Reset1").click();



Related