입력 유형 = 파일 표시 전용 버튼
스타일(또는 스크립트)을 작성할 수 있는 방법이 있습니까?<input type=file />텍스트 필드 없이 "찾아보기" 버튼만 보이는 요소?
감사해요.
편집: 제가 왜 이것이 필요한지 명확히 하기 위해서입니다.http://www.morningz.com/ ?p=5의 다중 파일 업로드 코드를 사용하고 있는데, 가치가 없기 때문에 입력 텍스트 필드가 필요 없습니다.스크립트는 페이지의 컬렉션에 새로 선택한 파일만 추가합니다.텍스트 필드가 없으면 훨씬 더 보기 좋을 것 같습니다.
<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />
이것은 제가 프로젝트에 사용한 것이기 때문에 분명 효과가 있을 것입니다.
저는 이 일을 해내려고 애를 먹고 있었습니다.플래시 솔루션을 사용하고 싶지 않았고, 모든 브라우저에서 신뢰할 수 있는 jQuery 라이브러리도 없었습니다.
저는 CSS에서 완전히 구현되는 자체 솔루션을 생각해 냈습니다(버튼이 '클릭' 된 것처럼 보이도록 on click 스타일 변경을 제외하고).
여기 http://jsfiddle.net/VQJ9V/307/ (FF 7, IE 9, Safari 5, Opera 11 및 Chrome 14에서 테스트됨)에서 사용할 수 있습니다.
큰 파일 입력(글꼴 크기:50px)을 만든 다음 고정된 크기와 오버플로:숨김이 있는 디브로 래핑하여 작동합니다.그러면 입력은 이 "window" div를 통해서만 볼 수 있습니다.div는 배경 이미지 또는 색상을 지정할 수 있고 텍스트를 추가할 수 있으며 입력을 투명하게 하여 div 배경을 나타낼 수 있습니다.
HTML:
<div class="inputWrapper">
<input class="fileInput" type="file" name="file1"/>
</div>
CSS:
.inputWrapper {
height: 32px;
width: 64px;
overflow: hidden;
position: relative;
cursor: pointer;
/*Using a background color, but you can use a background image to represent a button*/
background-color: #DDF;
}
.fileInput {
cursor: pointer;
height: 100%;
position:absolute;
top: 0;
right: 0;
z-index: 99;
/*This makes the button huge. If you want a bigger button, increase the font size*/
font-size:50px;
/*Opacity settings for all browsers*/
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}
문제가 있으면 말씀해주시면 수정해보도록 하겠습니다.
나는 오늘 하루를 헛되이 보내면서 일을 시작했습니다.여기 있는 모든 해결책들이 제 시나리오마다 효과가 있는 것을 발견하지 못했습니다.
그때 텍스트가 없는 JQuery File Upload의 예를 본 것이 생각났습니다.그래서 제가 한 것은 그들의 예를 들어 해당 부분으로 압축한 것입니다.
이 솔루션은 적어도 IE와 FF에 적합하며 완전히 스타일링 할 수 있습니다.아래 예제에서는 화려한 "Add Files" 버튼 아래에 파일 입력이 숨겨져 있습니다.
<html>
<head>
<title>jQuery File Upload Example</title>
<style type="text/css">
.myfileupload-buttonbar input
{
position: absolute;
top: 0;
right: 0;
margin: 0;
border: solid transparent;
border-width: 0 0 100px 200px;
opacity: 0.0;
filter: alpha(opacity=0);
-o-transform: translate(250px, -50px) scale(1);
-moz-transform: translate(-300px, 0) scale(4);
direction: ltr;
cursor: pointer;
}
.myui-button
{
position: relative;
cursor: pointer;
text-align: center;
overflow: visible;
background-color: red;
overflow: hidden;
}
</style>
</head>
<body>
<div id="fileupload" >
<div class="myfileupload-buttonbar ">
<label class="myui-button">
<span >Add Files</span>
<input id="file" type="file" name="files[]" />
</label>
</div>
</div>
</body>
</html>
for attribute가 있는 레이블 태그를 for attribute 값을 파일 입력 버튼에 할당합니다.
이제 레이블을 클릭하면 브라우저에서 파일 찾아보기 대화 팝업이 자동으로 열립니다.
참고: CSS를 사용하여 파일 입력 버튼을 숨깁니다.
아래 라이브 데모를 확인해 보십시오.
$('#imageUpload').change(function() {
readImgUrlAndPreview(this);
function readImgUrlAndPreview(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imagePreview').removeClass('hide').attr('src', e.target.result);
}
};
reader.readAsDataURL(input.files[0]);
}
});.hide {
display: none;
}
.btn {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid #ddd;
box-shadow: 2px 2px 10px #eee;
border-radius: 4px;
}
.btn-large {
padding: 11px 19px;
font-size: 17.5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#imagePreview {
margin: 15px 0 0 0;
border: 2px solid #ddd;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div clas="file_input_wrap">
<input type="file" name="imageUpload" id="imageUpload" class="hide" />
<label for="imageUpload" class="btn btn-large">Select file</label>
</div>
<div class="img_preview_wrap">
<img src="" id="imagePreview" alt="Preview Image" width="200px" class="hide" />
</div>입력 파일 요소를 숨기고 해당 입력 파일의 클릭 이벤트를 트리거하는 보이는 버튼을 만듭니다.
시도해 보기:
CSS
#file { width:0; height:0; }
HTML:
<input type='file' id='file' name='file' />
<button id='btn-upload'>Upload</button>
자바스크립트(jQuery):
$(function(){
$('#btn-upload').click(function(e){
e.preventDefault();
$('#file').click();}
);
});
저는 상위 두 가지 솔루션을 구현하려고 노력했지만, 결국 제게 엄청난 시간 낭비가 되었습니다.결국 이 .css 클래스를 적용하면 문제가 해결되었습니다...
input[type='file'] {
color: transparent;
}
끝! 아주 깨끗하고 아주 간단합니다.
그것은 매우 어려울 것입니다.파일 입력 유형의 문제는 일반적으로 두 개의 시각적 요소로 구성되는 반면 단일 DOM-요소로 취급된다는 것입니다.여기에 여러 브라우저가 파일 입력에 대한 독특한 외관과 느낌을 가지고 있으며 악몽을 꾸기 위한 준비가 되어 있습니다.파일 입력에 대한 특이점에 대해서는 quirksmode.org 에서 이 기사를 참조하십시오.그것이 당신을 행복하게 하지는 않을 것임을 장담합니다.
[편집]
사실은 입력한 내용을 컨테이너 요소(디브 같은)에 넣고 요소에 음의 마진을 추가하면 벗어날 수 있다고 생각합니다.텍스트 상자 부분을 화면 밖으로 효과적으로 숨깁니다.제가 링크한 기사의 기법을 사용하여 버튼처럼 스타일링을 해보는 것도 방법입니다.
모든 브라우저에서 작동하도록 수정 확인:
<input type = "button" value = "Choose image"
onclick ="javascript:document.getElementById('imagefile').click();">
<input id = "imagefile" type="file" style='visibility: hidden;' name="img"/>
FF, Chrome & IE에서 테스트를 해보았습니다. 잘 작동하고, 적용된 스타일도 :D
이것이 내 좋은 치료법입니다.
<input type="file" id="myFile" style="display:none;" />
<button type="button" onclick="document.getElementById('myFile').click();">Browse</button>
적어도 사파리에서는 통했습니다.
있는 그대로의 단순한.
이것을 하는 또 다른 쉬운 방법.html에 "입력형 파일" 태그를 만들어 숨깁니다.그런 다음 버튼을 클릭하고 필요에 따라 형식을 지정합니다.이 후 javascript/jquery를 사용하여 버튼을 클릭할 때 입력 태그를 프로그래밍 방식으로 클릭합니다.
HTML :-
<input id="file" type="file" style="display: none;">
<button id="button">Add file</button>
자바스크립트 :-
document.getElementById('button').addEventListener("click", function() {
document.getElementById('file').click();
});
jQuery :-
$('#button').click(function(){
$('#file').click();
});
CSS :-
#button
{
background-color: blue;
color: white;
}
다음은 동일한 JS fiddle입니다 :- http://jsfiddle.net/32na3/
위에서 추천해준 코드를 사용했고 몇시간동안 허리를 조여준 끝에 결국 css bag free 솔루션에 도달했습니다.
여기서 실행할 수 있습니다 - http://jsfiddle.net/WqGph/
그러나 그 후 더 나은 해결책을 찾았습니다 - http://jsfiddle.net/XMMc4/5/
<input type = "button" value = "Choose image #2"
onclick ="javascript:document.getElementById('imagefile').click();">
<input id = "imagefile" type="file" style='display:none;' name="img" value="none"/>see jsfiddle code for examples<br/>
이미지를 클릭하면 버튼 클릭 이벤트가 트리거되도록 이미지에 레이블을 지정할 수 있습니다.그냥 일반 버튼을 보이지 않게 만들 수 있습니다.
<form>
<label for="fileButton"><img src="YourSource"></label> <!--You don't have to put an image here, it can be anything you like-->
<input type="file" id="fileButton" style="display:none;"/>
</form>
모든 브라우저에서 사용할 수 있었고, 사용하기도 매우 쉽습니다.
다음과 같이 숨겨진 파일 입력에 클릭 이벤트를 발송할 수 있습니다.
<form action="#type your action here" method="POST" enctype="multipart/form-data">
<div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" >Click to upload!</div>
<!-- hide input[type=file]!-->
<div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
<input type="submit" value='submit' >
</form>
<script type="text/javascript">
var btn = document.getElementById("yourBtn");
var upfile = document.getElementById("upfile");
btn.addEventListener('click',function(){
if(document.createEvent){
var ev = document.createEvent('MouseEvents');
ev.initEvent('click',true,false);
upfile.dispatchEvent(ev);
}else{
upfile.click();
}
});
</script>HTML:
<input type="file" name="upload" id="upload" style="display:none"></input>
<button id="browse">Upload</button>
제이쿼리
$(document).ready(function(){
$("#browse").click(function(){
$("#upload").click();
});
});
이게 통하길 바라요 :)
이 HTML 코드는 Upload File(파일 업로드) 버튼만 표시됩니다.
<form action="/action_page.php">
<input type="button" id="id" value="Upload File" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file" onchange="this.form.submit()"/>
</form>
입력 요소의 글꼴 불투명도를 0으로 지정할 수 있습니다.이렇게 하면 '파일 선택' 단추를 숨기지 않고 텍스트 필드를 숨깁니다.
자바스크립트가 필요 없고, IE 9까지 거슬러 올라가는 선명한 교차 브라우저
예.,
input {color: rgba(0, 0, 0, 0);}
내가 이걸 해결해줄 수 있는...
<style type="text/css">
input[type="file"]
{
width: 80px;
}
</style>
<input id="File1" type="file" />
문제는 텍스트 필드를 숨기고 있는 너비 속성이 브라우저마다, 윈도우 XP 테마마다 분명히 다르다는 것입니다.그래도 할 수 있는 일인가요?
이것이 오래된 게시물이라는 것을 알고 있지만 텍스트를 사라지게 하는 간단한 방법은 텍스트 색을 배경색으로 설정하는 것입니다.
예를 들어 텍스트 입력 배경이 흰색인 경우:
input[type="file"]{
color:#fff;
}
브라우저로 인해 파일 선택 텍스트는 여전히 검은색으로 표시됩니다.
이 파일 입력 버튼의 렌더 및 번역을 유지하면서 파일 입력 버튼만 표시하는 간단하고 해킹된 방법이 있습니다.
파일 입력 후에 표시되는 텍스트를 투명하게 표시하여 보이지 않게 만듭니다.
<input type="file" style="color: transparent" />
제 해결책은 "divveen"이 말한 것처럼 div 내에서 설정하는 것이지만, 저는 div에 제 자신의 버튼 스타일을 추가하고(a:div가 있는 버튼처럼 보이게) 입력에 "opacity:0;" 스타일을 설정할 뿐입니다.저한테 매력이 있네요, 당신에게도 그렇게 되길 바랍니다.
이것은 저에게 효과가 있습니다.
input[type="file"] {
color: white!important;
}
방금 입력파일을 가로:85px로 스타일링했는데 텍스트 필드가 아예 사라졌습니다.
<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo">
$("#logo").css('opacity','0');
$("#select_logo").click(function(){
$().trigger('click');
return false;
});
저에게 가장 간단한 방법은 배경색과 같은 글꼴 색을 사용하는 것입니다.단순하고 우아하지는 않지만 유용합니다.
<div style="color:#FFFFFF"> <!-- if background page is white, of course -->
<input class="fileInput" type="file" name="file1"/></div>
다음은 모든 브라우저를 위한 최선의 방법입니다.
CSS는 잊어버려요!
<p>Append Image:</p>
<input type="button" id="clickImage" value="Add Image" />
<input type="file" name="images[]" id="images" multiple />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" charset="utf-8"></script>
<script>
$('#images').hide();
$('#clickImage').click( function() {
$('#images').trigger('click');
});
</script>
이 모든 답변들은 귀엽지만, CSS는 브라우저와 기기 모두에서 같지 않기 때문에 작동하지 않을 것입니다. 제가 쓴 첫 번째 답변은 사파리를 제외한 모든 것에서 작동할 것입니다.모든 브라우저에서 항상 작동하려면 입력 텍스트를 지울 때마다 동적으로 생성되고 재생성되어야 합니다.
var imageDiv = document.createElement("div");
imageDiv.setAttribute("id", "imagediv");
imageDiv.style.cssText = 'position:relative; vertical-align: bottom;';
var imageText = document.createTextNode("Append Image:");
var newLine = document.createElement("br");
var image = document.createElement("input");
image.setAttribute("type", "file");
image.setAttribute("id", "images");
image.setAttribute("name", "images[]");
image.setAttribute("multiple", "multiple");
imageDiv.appendChild(imageText);
imageDiv.appendChild(newLine);
imageDiv.appendChild(image);
questionParagraph.appendChild(imageDiv);
파이어폭스 v20에서는 테두리 너비로 플레이할 수 없다는 점을 제외하면 그들의 답변은 꽤 좋습니다.링크를 보면(여기서 실제로 표시할 수 없음) Firefox에서 font-size=23fps, transform:fps300fps, 0fps) scale(4)을 사용하여 문제를 해결했습니다.
다른 div에서 .click()을 사용하는 다른 솔루션은 드래그 앤 드롭 입력 상자로 만들려면 소용이 없습니다.
여기에 몇 가지 유효한 옵션이 있지만 비슷한 문제를 해결하기 위해 생각해낸 것을 제공하려고 합니다.http://jsfiddle.net/5RyrG/1/
<span class="btn fileinput-button">
<span>Import Field(s)</span>
<input id="fileupload" type="file" name="files[]" onchange="handleFiles(this.files)" multiple>
</span>
<div id="txt"></div>
function handleFiles(files){
$('#txt').text(files[0].name);
}
제가 쓴 글입니다.
<form action='' method='POST' name='form-upload-image' id='form-upload-image' enctype='multipart/form-data'>
<div style="width: 0; height: 0; overflow: hidden;">
<input type="file" name="input-file" id="input-file" onchange="this.files.length > 0 ? document.getElementById('form-upload-image').submit():null;" />
</div>
</form>
<img src="image.jpg" style="cursor: pointer;" onclick="document.getElementById('input-file').click();" />모든 브라우저에서 잘 작동하고, jQuery도 없고, CSS도 없습니다.
다음은 모든 주요 브라우저에서 작동하는 @ampersandre의 인기 솔루션의 단순화된 버전입니다.ASP.NET 마크업
<asp:TextBox runat="server" ID="FilePath" CssClass="form-control"
style="float:left; display:inline; margin-right:5px; width:300px"
ReadOnly="True" ClientIDMode="Static" />
<div class="inputWrapper">
<div id="UploadFile" style="height:38px; font-size:16px;
text-align:center">Upload File</div>
<div>
<input name="FileUpload" id="FileInput" runat="server"
type="File" />
</div>
</div>
<asp:Button ID="UploadButton" runat="server"
style="display:none" OnClick="UploadButton_Click" />
</div>
<asp:HiddenField ID="hdnFileName" runat="server" ClientIDMode="Static" />
제이쿼리 코드
$(document).ready(function () {
$('#UploadFile').click(function () {
alert('UploadFile clicked');
$('[id$="FileInput"]').trigger('click');
});
$('[id$="FileInput"]').change(function (event) {
var target = event.target;
var tmpFile = target.files[0].name;
alert('FileInput changed:' + tmpFile);
if (tmpFile.length > 0) {
$('#hdnFileName').val(tmpFile);
}
$('[id$="UploadButton"]').trigger('click');
});
});
CSS 코드
.inputWrapper {
height: 38px;
width: 102px;
overflow: hidden;
position: relative;
padding: 6px 6px;
cursor: pointer;
white-space:nowrap;
/*Using a background color, but you can use a background image to represent
a button*/
background-color: #DEDEDE;
border: 1px solid gray;
border-radius: 4px;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
숨겨진 "UploadButton" 클릭 트리거를 표준으로 서버 포스트백에 사용합니다."Upload File(파일 업로드)" 텍스트를 사용하면 래퍼 디브에서 입력 컨트롤이 오버플로우되면 보이지 않게 되므로 "파일 입력" 컨트롤 디브에 대한 스타일을 적용할 필요가 없습니다.$[id$="FileInput"] 선택기를 사용하면 표준 ASP를 사용하여 ID의 섹션을 구성할 수 있습니다.NET 접두사가 적용되었습니다.서버 코드에서 hdnFileName 뒤에 설정된 FilePath 텍스트 상자 값입니다.파일이 업로드되면 값.
언급URL : https://stackoverflow.com/questions/1084925/input-type-file-show-only-button
'programing' 카테고리의 다른 글
| Mysql이 아래 오류 센토스를 생성하기 시작하지 않습니다. (0) | 2023.09.06 |
|---|---|
| 이진 문자열을 10진수로 변환하는 방법은? (0) | 2023.09.06 |
| mingw로 mariadb C 커넥터를 만들 수 없습니다. (0) | 2023.09.06 |
| Express와 hapi는 서로 어떻게 비교됩니까? (0) | 2023.09.06 |
| java.sql.SQL 비일시적 연결Maria에게 데이터 프레임을 쓰는 동안 예외가 발생했습니다.DB (0) | 2023.09.06 |