선택한 파일 수를 표시하는 방법

내 프로젝트에 다음 코드를 통합했습니다. 파일 선택의 기본 스타일 단추를 변경하고 싶지만 파일을 선택할 때 총 파일 수는 표시되지 않습니다.선택한 파일 수를 표시하는 방법

기본 파일 선택 버튼 대신 총 파일 수를 표시하려면 어떻게해야합니까?

도움을 주시면 감사하겠습니다.

<pre> 
<html> 
<head> 
<style> 
.btn { 
    display: inline-block; 
    padding: 6px 12px; 
    margin-bottom: 0; 
    font-size: 14px; 
    font-weight: normal; 
    line-height: 1.42857143; 
    text-align: center; 
    white-space: nowrap; 
    vertical-align: middle; 
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    background-image: none; 
    border: 1px solid transparent; 
    border-radius: 4px; 
} 
.btn-success { 
    color: #fff; 
    background-color: #5cb85c; 
    border-color: #4cae4c; 
} 
.fileinput-button { 
    position: relative; 
    overflow: hidden; 
} 
.fileinput-button input { 
    position: absolute; 
    top: 0; 
    right: 0; 
    margin: 0; 
    opacity: 0; 
    -ms-filter:'alpha(opacity=0)'; 
    font-size: 200px; 
    direction: ltr; 
    cursor: pointer; 
} 
</style> 
</head> 
<body> 
<form method="POST" action="myurl"> <span class="btn btn-success fileinput-button"> 
     <span>Select file</span> 

    <input type="file" name="file"> 
    </span> 
</form> 
</body> 
</html> 
</pre>

출처

2014-05-22 jones

'(당신은 당신의 파일 입력의 변화에이 코드를 실행해야합니다) 파일을 선택하면 파일 수가 표시되지 않습니다. '이 작업을 수행 할 자바 스크립트는 어디에 있습니까? –

''에 속성 다중을 추가하십시오. 카운트는 입력 파일 요소의 기본 동작으로 표시됩니다. –

참고로, 파일 업로드를 처리 할 때 양식에'enctype' 속성이 필요합니다. – asprin

추가 multiple 속성이 선택 여러 개의 파일 -

선택하려면 파일 정보 -

var files = document.getElementById("yourFileInputId").files; 
for (var i = 0; i < files.length; i++) 
    console.log(files[i].name);

출처

2014-05-22 08:33:24

이것은 어떻게 든 답을 찾는데 도움이되었습니다. 감사 ! – jones

선택한 파일 수를 표시하는 방법

답변

관련 문제