입력 유형 =“파일”에서 기본 텍스트를 변경 하시겠습니까?
Choose File사용할 때 " "인 버튼의 기본 텍스트를 변경하고 싶습니다 input="file".
어떻게해야합니까? 또한 이미지에서 볼 수 있듯이 버튼은 텍스트의 왼쪽에 있습니다. 텍스트의 오른쪽에 어떻게 넣을 수 있습니까?
각 브라우저에는 컨트롤에 대한 고유 한 표현이 있으므로 컨트롤의 텍스트 나 방향을 변경할 수 없습니다.
Flash 또는 silverlight 솔루션이 아닌 html / css 솔루션 을 원할 경우 시도 할 수있는 "종류"해킹이 있습니다 .
http://www.quirksmode.org/dom/inputfile.html
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
개인적으로 대부분의 사용자는 선택한 브라우저를 사용하므로 기본 변환에서 컨트롤을 보는 데 익숙 할 것이므로 처리하는 사용자 유형에 따라 다른 무언가를 보았을 때 혼란 스러울 수 있습니다. .
for의 "for"속성을 사용하십시오 .labelinput
<div>
<label for="files" class="btn">Select Image</label>
<input id="files" style="visibility:hidden;" type="file">
</div>
$("#files").change(function() {
filename = this.files[0].name
console.log(filename);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label for="files" class="btn">Select Image</label>
<input id="files" style="visibility:hidden;" type="file">
</div>이것은 나중에 누군가에게 도움이 될 수 있습니다. 원하는대로 입력 레이블의 스타일을 지정하고 원하는 것을 입력하고 표시 없음으로 입력을 숨길 수 있습니다.
iOS로 코르도바에서 완벽하게 작동합니다.
<link href="https://cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.css" rel="stylesheet"/>
<label for="imageUpload" class="btn btn-primary btn-block btn-outlined">Seleccionar imagenes</label>
<input type="file" id="imageUpload" accept="image/*" style="display: none">나는 이것이 당신이 원하는 것이라고 생각합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button style="display:block;width:120px; height:30px;" onclick="document.getElementById('getFile').click()">Your text here</button>
<input type='file' id="getFile" style="display:none">
</body>
</html>불가능합니다. 그렇지 않으면 Silverlight 또는 Flash 업로드 컨트롤을 사용해야 할 수도 있습니다.
여기 당신이 그것을 할 수있는 방법 :
jQuery를 :
$(function() {
$("#labelfile").click(function() {
$("#imageupl").trigger('click');
});
})
CSS
.file {
position: absolute;
clip: rect(0px, 0px, 0px, 0px);
display: block;
}
.labelfile {
color: #333;
background-color: #fff;
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
white-space: nowrap;
padding: 6px 8px;
font-size: 14px;
line-height: 1.42857143;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
HTML 코드 :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="margin-top:4px;">
<input name="imageupl" type="file" id="imageupl" class="file" />
<label class="labelfile" id="labelfile"><i class="icon-download-alt"></i> Browse File</label>
</div>
부트 스트랩을 사용하면 아래 코드와 같이이 작업을 수행 할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
</style>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<span class="btn btn-file">Upload image from here<input type="file">
</body>
</html>
I made a script and published it at GitHub: get selectFile.js Easy to use, feel free to clone.
HTML
<input type=file hidden id=choose name=choose>
<input type=button onClick=getFile.simulate() value=getFile>
<label id=selected>Nothing selected</label>
JS
var getFile = new selectFile;
getFile.targets('choose','selected');
DEMO
jsfiddle.net/Thielicious/4oxmsy49/
Update 2017:
I have done research on how this could be achieved. And the best explanation/tutorial is here: https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
I'll write summary here just in case it becomes unavailable. So you should have HTML:
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file</label>
Then hide the input with CSS:
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;}
Then style the label:
.inputfile + label {
font-size: 1.25em;
font-weight: 700;
color: white;
background-color: black;
display: inline-block;
}
Then optionally you can add JS to display the name of the file:
var inputs = document.querySelectorAll( '.inputfile' );
Array.prototype.forEach.call( inputs, function( input )
{
var label = input.nextElementSibling,
labelVal = label.innerHTML;
input.addEventListener( 'change', function( e )
{
var fileName = '';
if( this.files && this.files.length > 1 )
fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
else
fileName = e.target.value.split( '\\' ).pop();
if( fileName )
label.querySelector( 'span' ).innerHTML = fileName;
else
label.innerHTML = labelVal;
});
});
But really just read the tutorial and download the demo, it's really good.
I'd use a button to trigger the input:
<button onclick="document.getElementById('fileUpload').click()">Open from File...</button>
<input type="file" id="fileUpload" name="files" style="display:none" />
Quick and clean.
You can use this approach, it works even if a lot of files inputs.
const fileBlocks = document.querySelectorAll('.file-block')
const buttons = document.querySelectorAll('.btn-select-file')
;[...buttons].forEach(function (btn) {
btn.onclick = function () {
btn.parentElement.querySelector('input[type="file"]').click()
}
})
;[...fileBlocks].forEach(function (block) {
block.querySelector('input[type="file"]').onchange = function () {
const filename = this.files[0].name
block.querySelector('.btn-select-file').textContent = 'File selected: ' + filename
}
}).btn-select-file {
border-radius: 20px;
}
input[type="file"] {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="file-block">
<button class="btn-select-file">Select Image 1</button>
<input type="file">
</div>
<br>
<div class="file-block">
<button class="btn-select-file">Select Image 2</button>
<input type="file">
</div>This should work:
input.className::-webkit-file-upload-button { style content.. }
Let me add a hack I used. I wanted to have a section that allowed you to drag and drop files, and I wanted that drag and drop section to be clickable along with the original upload button.
Here is how it looked like when I was done (minus the drag and drop ability, there are plenty of tutorials on how to do that).
And then I actually created a series of blog posts that are mainly about file upload buttons.
Ok so very simple pure css way of creating your custom input file.
Use labels, but as you know from previous answers, label doesn't invoke onclick function in firefox, may be a bug but doesn't matter with the following.
<label for="file" class="custom-file-input"><input type="file" name="file" class="custom-file-input"></input></label>
라벨을 스타일링하여 원하는 방식으로 표시
.custom-file-input {
color: transparent;/* This is to take away the browser text for file uploading*/
/* Carry on with the style you want */
background: url(../img/doc-o.png);
background-size: 100%;
position: absolute;
width: 200px;
height: 200px;
cursor: pointer;
top: 10%;
right: 15%;
}
이제 실제 입력 버튼을 숨기고로 설정할 수 없습니다. visability: hidden
설정하여 보이지 않게 opacity: 0;
input.custom-file-input {
opacity: 0;
position: absolute;/*set position to be exactly over your input*/
left: 0;
top: 0;
}
이제 입력 필드와 레이블에 동일한 클래스가 있음을 알았을 것입니다. 즉, 둘 다 동일한 스타일을 원하기 때문에 레이블을 클릭하면 실제로 보이지 않는 것을 클릭합니다. 입력 필드.
<button class="styleClass" onclick="document.getElementById('getFile').click()">Your text here</button>
<input type='file' id="getFile" style="display:none">
이것은 지금까지 여전히 최고입니다
참고 URL : https://stackoverflow.com/questions/5138719/change-default-text-in-input-type-file
'IT story' 카테고리의 다른 글
| 이 코드는 왜 버퍼 오버 플로우 공격에 취약합니까? (0) | 2020.06.13 |
|---|---|
| Bash 스크립트에서 주석 달기 (0) | 2020.06.13 |
| C ++에서 문자열 앞의 'L'은 무엇을 의미합니까? (0) | 2020.06.13 |
| 백 스택에 추가 될 때 어떻게 프래그먼트 상태를 유지할 수 있습니까? (0) | 2020.06.13 |
| 패널 또는 PlaceHolder 사용 (0) | 2020.06.13 |