다음과 같이 “파일 선택”버튼이 있습니다 (Jade를 사용하고 있지만 Html5와 동일해야합니다).
input(type='file', name='videoFile')
브라우저에서 “선택한 파일 없음”옆에 텍스트가있는 버튼이 표시됩니다. “선택한 파일 없음”텍스트를 “선택한 동영상 없음”또는 “동영상을 선택하십시오”와 같은 다른 것으로 변경하고 싶습니다. 여기에서 첫 번째 제안을 따랐습니다.
파일 입력 필드에 ‘선택된 파일 없음’을보고 싶지 않습니다.
그러나 이렇게해도 텍스트는 변경되지 않았습니다.
input(type='file', name='videoFile', title = "Choose a video please")
아무도 문제가 어디에 있는지 알아낼 수 있습니까?
답변
버튼의 기본 레이블을 변경할 수 없다고 확신합니다. 브라우저에서 하드 코딩되어 있습니다 (각 브라우저에서 버튼 캡션을 고유 한 방식으로 렌더링). 이 버튼 스타일링 기사를 확인 하십시오.
답변
CSS로 입력을 숨기고 레이블을 추가하고 입력 버튼에 할당합니다. 레이블을 클릭 할 수 있으며 클릭하면 파일 대화 상자가 나타납니다.
<input type="file" id="files" class="hidden"/>
<label for="files">Select file</label>
그런 다음 원하는 경우 레이블 스타일을 단추로 지정하십시오.
답변
이것은 단지 트릭을 시도하십시오
<input type="file" name="uploadfile" id="img" style="display:none;"/>
<label for="img">Click me to upload image</label>
작동 원리
아주 간단합니다. Label 요소는 “for”태그를 사용하여 양식의 요소를 id로 참조합니다. 이 경우 “img”를 참조 키로 사용했습니다. 완료되면 레이블을 클릭 할 때마다 자동으로 양식의 요소 클릭 이벤트 (이 경우 파일 요소 클릭 이벤트)가 트리거됩니다. 그런 다음 빈 공간을 만들지 않도록 display : none이 아닌 visible : hidden을 사용하여 파일 요소를 보이지 않게 만듭니다.
코딩 즐기기
답변
위의 링크를 참조하십시오. CSS를 사용하여 기본 텍스트를 숨기고 레이블을 사용하여 원하는 것을 표시합니다.
<div><input type='file' title="Choose a video please" id="aa" onchange="pressed()"><label id="fileLabel">Choose file</label></div>
input[type=file]{
width:90px;
color:transparent;
}
window.pressed = function(){
var a = document.getElementById('aa');
if(a.value == "")
{
fileLabel.innerHTML = "Choose file";
}
else
{
var theSplit = a.value.split('\\');
fileLabel.innerHTML = theSplit[theSplit.length-1];
}
};
답변
맞습니다. 사전 업로드 파일 목록이 있어도 ‘선택한 파일 없음’을 제거 할 방법이 없습니다.
내가 찾은 (그리고 IE, FF, CR에서 작동하는) 가장 간단한 솔루션은 다음과 같습니다.
- 입력 내용을 숨기고 ‘파일’버튼 추가
- 그런 다음 ‘파일’버튼을 호출하고 파일 업로드를 바인딩하도록 요청합니다 (이 예제에서는 JQuery를 사용하고 있습니다).
$('.addfiles').on('click', function() { $('#fileupload').click();return false;});<button class="addfiles">Add Files</button>
<input id="fileupload" type="file" name="files[]" multiple style='display: none;'>완료, 완벽하게 작동합니다. 🙂
프레드
답변
$(function () {
$('input[type="file"]').change(function () {
if ($(this).val() != "") {
$(this).css('color', '#333');
}else{
$(this).css('color', 'transparent');
}
});
})input[type="file"]{
color: transparent;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="app_cvupload" class="fullwidth input rqd">답변
하지만이 툴팁을 제거하려고하면
<input type='file' title=""/>
이것은 작동하지 않습니다. 이 작업을 수행하는 작은 트릭은 다음과 같습니다. 공백으로 제목을 시도하십시오. 작동합니다. 🙂
<input type='file' title=" "/>
