다음과 같이 "파일 선택"버튼이 있습니다 (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>
그런 다음 원하는 경우 레이블 스타일을 단추로 지정하십시오.
file inputJavaScript에서 숨기고 클릭 할 수 없습니다 . 감사!
이것은 단지 트릭을 시도하십시오
<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에서 작동하는) 가장 간단한 솔루션은 다음과 같습니다.
$('.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=" "/>
title내가보기 에 속성에서 설정 한 텍스트로 툴팁을 추가합니다
HTML
<div class="fileUpload btn btn-primary">
<label class="upload">
<input name='Image' type="file"/>
Upload Image
</label>
</div>
CSS
input[type="file"]
{
display: none;
}
.fileUpload input.upload
{
display: inline-block;
}
참고 : Btn btn-primary는 부트 스트랩 버튼의 클래스입니다. 그러나 버튼의 위치가 이상하게 보일 수 있습니다. 인라인 CSS로 해결할 수 있기를 바랍니다.
.vendor_logo_hide{
display: inline !important;;
color: transparent;
width: 99px;
}
.vendor_logo{
display: block !important;
color: black;
width: 100%;
}
$(document).ready(function() {
// set text to select company logo
$("#Uploadfile").after("<span class='file_placeholder'>Select Company Logo</span>");
// on change
$('#Uploadfile').change(function() {
// show file name
if ($("#Uploadfile").val().length > 0) {
$(".file_placeholder").empty();
$('#Uploadfile').removeClass('vendor_logo_hide').addClass('vendor_logo');
console.log($("#Uploadfile").val());
} else {
// show select company logo
$('#Uploadfile').removeClass('vendor_logo').addClass('vendor_logo_hide');
$("#Uploadfile").after("<span class='file_placeholder'>Select Company Logo</span>");
}
});
});.vendor_logo_hide {
display: inline !important;
;
color: transparent;
width: 99px;
}
.vendor_logo {
display: block !important;
color: black;
width: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="file" class="vendor_logo_hide" name="v_logo" id='Uploadfile'>
<span class="fa fa-picture-o form-control-feedback"></span>
<div>
<p>Here defualt no choose file is set to select company logo. if File is selected then it will displays file name</p>
</div>입력 너비 만 변경하면됩니다. 약 90px
<input type="file" style="width: 90px" />
<div class="field">
<label class="field-label" for="photo">Your photo</label>
<input class="field-input" type="file" name="photo" id="photo" value="photo" />
</div>
그리고 CSS
input[type="file"]
{
color: transparent;
background-color: #F89406;
border: 2px solid #34495e;
width: 100%;
height: 36px;
border-radius: 3px;
}
이 방법으로 시도 할 수 있습니다.
<div>
<label for="user_audio" class="customform-control">Browse Computer</label>
<input type='file' placeholder="Browse computer" id="user_audio"> <span id='val'></span>
<span id='button'>Select File</span>
</div>
선택한 파일을 표시하려면 :
$('#button').click(function () {
$("input[type='file']").trigger('click');
})
$("input[type='file']").change(function () {
$('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
$('.customform-control').hide();
})
선택한 파일 이름을 얻은 @ unlucky13에게 감사드립니다.
다음은 작동하는 바이올린입니다.
이렇게하면 "프로필 사진을 선택하는 파일 없음"의 이름을 변경하는 데 도움이됩니다.
<input type='file'id="files" class="hidden"/>
<label for="files">Select profile picture</label>
나는 "라벨"대신 "버튼"을 사용하고, 이것이 누군가에게 도움이되기를 바랍니다.
버튼 만 표시되고 사용자가 클릭하면 파일 선택기가 팝업되고 파일 선택 후 자동으로 업로드됩니다.
<button onclick='<%= "$(\"#" + FileUpload1.ClientID + "\").click(); return false;" %>'>The Text You Want</button>
<asp:FileUpload onchange="$('#btnUpload').click();" ID="FileUpload1" runat="server" style="display: none;" />
<asp:Button ID="btnUpload" ClientIDMode="Static" runat="server" OnClick="btnUpload_Click" style="display: none;" />
다음 위치에 좋은 예 (파일 유형 유효성 검사 포함)가 있습니다.
https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html
기본적으로 버튼 사용에 대한 Amos의 구체화 된 버전입니다.
위의 제안 중 몇 가지를 시도했지만 성공하지 못했습니다.
나는 그것을 사용하여 Excel 파일 변환을 수행하기 위해 용도를 변경하고 있습니다.
<form>
<div>
<label for="excel_converts">Choose a spreadsheet to convert.</label>
<input type="file" id="excel_converts" name="excel_converts" accept=".xlsx, .xls, .csv" >
</div>
<div class="preview">
<p>No spreadsheet currently selected for conversion</p>
</div>
<div>
<button>Submit</button>
</div>
</form>