<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로 완전히 구현 된 자체 솔루션을 찾았습니다 (버튼 클릭이 '클릭'되도록 보이기 위해 onclick 스타일 변경 제외).
http://jsfiddle.net/VQJ9V/307/ (FF 7, IE 9, Safari 5, Opera 11 및 Chrome 14에서 테스트 됨)에서 실제 예제를 사용해 볼 수 있습니다.
큰 파일 입력 (font-size : 50px)을 만든 다음 고정 크기와 overflow : hidden을 가진 div에 래핑하여 작동합니다. 입력은이 "창"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 파일 업로드 의 예를 보았습니다 . 그래서 제가 한 것은 그들의 예를 들어서 관련 부분으로 줄였습니다.
이 솔루션은 적어도 IE 및 FF에서 작동하며 완전히 스타일을 지정할 수 있습니다. 아래 예제에서 파일 입력은 멋진 "파일 추가"버튼 아래에 숨겨져 있습니다.
<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>입력 파일 요소를 숨기고 해당 입력 파일의 클릭 이벤트를 트리거하는 표시 단추를 작성하십시오.
이 시도:
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" name="imageUpload" id="imageUpload" class="hide"/>
<label for="imageUpload" class="button-style">Select file</label>레이블에 스타일을 버튼으로 추가하십시오.
라이브 데모
onchange처리기를 추가합니다 input.
그것은 매우 어려울 것입니다. 파일 입력 유형의 문제점은 일반적으로 단일 DOM 요소로 취급되는 동안 두 개의 시각적 요소로 구성된다는 것입니다. 또한 일부 브라우저는 파일 입력에 대한 고유 한 모양과 느낌을 가지고 있으며 악몽으로 설정되어 있습니다. 파일 입력의 단점 에 대해서는 quirksmode.org 에서이 기사를 참조하십시오 . 나는 그것이 당신을 행복하게하지 않을 것이라고 보장합니다 (나는 경험에서 말합니다).
[편집하다]
실제로, 입력을 컨테이너 요소 (예 : div)에 넣고 요소에 음의 여백을 추가하면 벗어날 수 있다고 생각합니다. 텍스트 상자 부분을 화면에서 효과적으로 숨 깁니다. 다른 옵션은 링크 된 기사의 기술을 사용하여 버튼처럼 스타일을 지정하는 것입니다.
모든 브라우저에서 작동하도록 수정되었습니다.
<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에서 테스트를 거쳤습니다.
이것을하는 또 다른 쉬운 방법. "입력 유형 파일"태그를 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 바이올린입니다 .- 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/>onchange숨겨진 input요소 에 대해 이벤트가 트리거되지 않는다는 것 입니다.
이미지에 레이블을 지정할 수 있으므로 이미지를 클릭하면 버튼의 클릭 이벤트가 트리거됩니다. 일반 버튼을 보이지 않게 만들 수 있습니다.
<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>그것은 모든 브라우저에서 저에게 효과적이며 사용하기 매우 쉽습니다.
다음과 같이 숨겨진 파일 입력에서 click 이벤트를 전달할 수 있습니다.
<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>var ev = document.createEvent('HTMLEvents'); HTMLEvents를 MouseEvents로 변경var ev = document.createEvent('MouseEvents');
이것으로 정말 해키 솔루션을 ...
<style type="text/css">
input[type="file"]
{
width: 80px;
}
</style>
<input id="File1" type="file" />문제는 텍스트 필드를 숨기는 너비 속성이 브라우저마다 다르고 Windows XP 테마마다 다릅니다. 어쩌면 당신이 할 수있는 일이 있습니까? ...
방금 너비가 85px 인 입력 파일의 스타일을 지정했으며 텍스트 필드가 전혀 사라졌습니다.
이 HTML 코드는 파일 업로드 버튼 만 표시합니다
<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>나에게 가장 간단한 방법은 배경색과 같은 글꼴 색을 사용하는 것입니다. 단순하고 우아하지는 않지만 유용합니다.
<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는 모든 브라우저와 장치에서 동일하지 않기 때문에 작동하지 않습니다. 내가 작성한 첫 번째 대답은 Safari 이외의 모든 것에서 작동합니다. 입력 텍스트를 지울 때마다 동적으로 작성되고 다시 작성되어야 할 때마다 모든 브라우저에서 작동하도록하려면 다음을 수행하십시오.
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);tmanthey의 대답은 Firefox v20에서 테두리 너비로 재생할 수 없다는 점을 제외하면 상당히 좋습니다. 당신이 볼 경우 링크 버튼을 더 크게하기 위해 파이어 폭스 (-300px, 0 픽셀) 규모 (4) 번역 : 그들은 변환, 글꼴 크기 = 23 픽셀을 사용하여 문제를 해결 (데모를 정말 여기에 표시 할 수 없습니다).
드래그 앤 드롭 입력 상자로 만들려면 다른 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" />JQuery 코드
$(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;
}standard와 함께 서버 포스트 백에 숨겨진 "UploadButton"클릭 트리거를 사용합니다. with "Upload File"텍스트는 오버플로시 래퍼 div에서 입력 컨트롤을 보이지 않게하므로 "file input"컨트롤 div에 스타일을 적용 할 필요가 없습니다. $ ([id $ = "FileInput"]) 선택기는 표준 ASP.NET 접두사가 적용된 id 섹션을 허용합니다. 파일이 업로드되면 hdnFileName.Value 뒤의 서버 코드에서 설정된 FilePath 텍스트 상자 값입니다.