<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>레이블에 스타일을 버튼으로 추가하십시오.
라이브 데모
답변
그것은 매우 어려울 것입니다. 파일 입력 유형의 문제점은 일반적으로 단일 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에서 테스트를 거쳤습니다.