입력 유형 = 파일을 이미지로 바꾸기

96

많은 사람들과 마찬가지로 추악한을 사용자 정의하고 싶습니다 . input type=file해킹 및 / 또는 javascript. 하지만 제 경우에는 업로드 파일 버튼이 이미지 ( jpeg | jpg | png | gif ) 를 업로드하기위한 것이므로 clickable입력 유형 파일 ( 대화 상자 및 제출 된 페이지에 동일한 $ _FILE 표시).
나는 몇 가지 해결 방법을 찾을 여기 , 그리고 이 흥미를 너무 (그러나 크롬 = / 작동하지 않습니다).

파일 버튼에 스타일을 추가하고 싶을 때 어떻게 하시나요? 그것에 대해 의견이 있으시면 대답 버튼을 누르십시오.)

css  image  file  button  input 
— 니콜라스
소스
2
여기에 착륙하는 모든 사람들에게 tympanus.net/codrops/2015/09/15/… 도 볼만한 가치가 있습니다. (어떤 방식, 형태 또는 형태로도 해당 사이트와 관련이 없습니다.)
— CBroe
— cнŝdk

답변:

276

이것은 나를 위해 정말 잘 작동합니다.

.image-upload>input {
  display: none;
}
<div class="image-upload">
  <label for="file-input">
    <img src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg"/>
  </label>

  <input id="file-input" type="file" />
</div>
스 니펫 확장

기본적으로 레이블 의 for 속성은 레이블을 클릭하는 것이 지정된 입력을 클릭하는 것과 동일 하도록 만듭니다 .

또한 표시 속성을 none으로 설정하면 파일 입력이 전혀 렌더링되지 않고 멋지고 깔끔하게 숨겨집니다.

Chrome에서 테스트되었지만 웹에 따르면 모든 주요 브라우저에서 작동합니다. :)

편집 : 여기에 JSFiddle 추가 : https://jsfiddle.net/c5s42vdz/

— 강경 한
소스
사람들이 여전히 '주요 브라우저'라고 생각하는지는 모르겠지만 IE7에서는 작동하지 않는 것 같습니다
— Hoppe
@Chet 최신 버전의 Safari (7+)에서 작업중인 것 같습니다. 어떤 버전을 사용하고 있습니까?
— hardsetting aug.
1
@Toto 나를 위해 그것은 IE11에서 작동하고 있으며 JSFiddle을 추가하여 확인할 수 있습니다.
— 년
@hardsetting 당신이 맞아요! 죄송합니다 (예 : 다른 문서 모드, 즉 8 이하)
— Toto
2
죄송하지만이 코드는 파일 이름 또는 최소한 파일이 성공적으로 선택되었다는 메시지로 업데이트되어야한다고 생각합니다. 사용자는 파일을 선택한 후 발생한 일에 대한 시각적 입력이 없습니다. 제발 할 수 있을까요? 파일을 선택하면 다른 이미지로 변경 될 수 있습니까?
— JoaMika
66

실제로 순수한 CSS로 할 수 있으며 매우 쉽습니다 ...

HTML 코드

<label class="filebutton">
Browse For File!
<span><input type="file" id="myfile" name="myfile"></span>
</label>

CSS 스타일 

label.filebutton {
    width:120px;
    height:40px;
    overflow:hidden;
    position:relative;
    background-color:#ccc;
}

label span input {
    z-index: 999;
    line-height: 0;
    font-size: 50px;
    position: absolute;
    top: -2px;
    left: -700px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -ms-filter: "alpha(opacity=0)";
    cursor: pointer;
    _cursor: hand;
    margin: 0;
    padding:0;
}

아이디어는 입력을 레이블 내부에 절대적으로 배치하는 것입니다. 입력의 글꼴 크기를 크게 설정하면 "찾아보기"버튼의 크기가 커집니다. 그런 다음 네거티브 left / top 속성을 사용하여 입력 찾아보기 버튼을 레이블 뒤에 배치하는 데 시행 착오가 걸립니다.

버튼을 배치 할 때 알파를 1로 설정합니다. 완료되면 다시 0으로 설정합니다 (현재 수행중인 작업을 볼 수 있음).

모든 브라우저에서 입력 버튼을 약간 다른 크기로 렌더링하므로 여러 브라우저에서 테스트해야합니다.

— 홍역
소스
감사합니다 Toby, 왜 'left : -700px;' ? 파이어 폭스에서 파일 입력 필드는 실제로 페이지의 왼쪽에 떠 있습니다 ... 라벨 범위에 달라 붙지 않습니다 ... 'left : -700px;'를 제거하면 잘 작동합니다
— lisak
+1 감사합니다. @Sloin은 왼쪽 : -700px로 탐색 버튼을 버튼 위에 놓고 커서가 텍스트 커서가 아닌 포인터가되도록했습니다.
— Caleb Doucet
14

@hardsetting의 훌륭한 솔루션이지만 Windows의 Safari (5.1.7)에서 작동하도록 몇 가지 개선했습니다.

.image-upload > input {
  visibility:hidden;
  width:0;
  height:0
}
<div class="image-upload">
  <label for="file-input">
    <img src="https://placehold.it/100/000000/ffffff?text=UPLOAD" style="pointer-events: none"/>
  </label>

  <input id="file-input" type="file" />
</div>
스 니펫 확장

사파리 문제 visibility: hidden, width:0대신 사용 display: none하고 입력 파일 유형 태그가 FORM 태그에 있으면 작동하도록 태그에 추가 pointer-events: none했습니다 img.

모든 주요 브라우저에서 나를 위해 일하는 것 같습니다.

누군가에게 도움이되기를 바랍니다.

— 리시
소스
style = "pointer-events : none"을 추가 할 필요가 없습니다. 찾아보기 파일을 열기 위해 이슈를 생성합니다.
— SantoshK
5

내가 사용하는 것이 SWFUpload 또는 Uploadify을 . Flash가 필요하지만 문제없이 원하는 모든 작업을 수행합니다.

<input type="file">실제 컨트롤을 클릭하는 것 이외의 방법으로 "파일 열기"대화 상자를 트리거하려는 모든 기반 해결 방법은 보안상의 이유로 언제든지 브라우저에서 제거 할 수 있습니다. (I는 생각 이 이벤트 그 프로그램 트리거에 더 이상 가능하지 않다, FF와 IE의 현재 버전.)

— 페카
소스
고마워요, 저도 주변에서 본 적이 있지만 둘 다 작동하려면 플래시 플레이어가 필요하다고 생각하며 사용자에게 다른 필수 레이어를 추가하고 싶지 않습니다. 또한 입력 파일과 똑같은 유형의 데이터를 보낼 것이라고 확신합니까? 제출 페이지에서 수행 한 모든 PHP를 다시 테스트하고 싶지 않습니다. 건배.
— Nicolas
@niko 아니요, 다르게 작동합니다. 양식 요소가 아니라 파일을 자체적으로 수신 스크립트로 전송하므로 스크립트의 워크 플로를 변경해야 할 것입니다. 그것이 옵션이 아니라면, 나는 당신이 링크 한 포스트에서 Shaun Inman보다 더 잘할 수 없다고 생각합니다 ...
— Pekka
무서워서 정말 부끄러운 일입니다. 향후 CSS 구현에서 그것에 대해 아무것도 없습니까? 어쨌든 회신 주셔서 감사합니다 :)
— Nicolas
@niko 천만에요. CSS에 대한 좋은 질문-실제로는 모르겠지만 HTML 5는 여기에 새로운 것을 가져올 수 있습니다. 예를 들어 appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload 를 확인하십시오 .
— Pekka
예, 데모 appelsiini.net/demo/html5_upload/demo.html 이 내 FF 3.6.3과 함께 표시되지 않지만 어쨌든 FF 3.6.x가 필요하다고 말하지만 내 문제로 돌아가려면 현재 HTML / CSS / Javscript (플래시 없음) 만 뭘 할 수 있나요? 일부 글꼴 및 "색상"사용자 정의? 내가 맞아? 건배.
— Nicolas
5

요점이 있으면이게 내 방법

HTML

<label for="FileInput">
    <img src="tools/img/upload2.png" style="cursor:pointer" onmouseover="this.src='tools/img/upload.png'" onmouseout="this.src='tools/img/upload2.png'" alt="Injaz Msila" style="float:right;margin:7px" />
</label>
<form action="upload.php">
    <input type="file" id="FileInput" style="cursor: pointer;  display: none"/>
    <input type="submit" id="Up" style="display: none;" />
</form>

jQuery

<script type="text/javascript">
    $( "#FileInput" ).change(function() {
      $( "#Up" ).click();
    });
</script>
— SystemDZ
소스
3

정말 간단합니다.

$("#image id").click(function(){
    $("#input id").click();
});
— Zicsus
소스
2

대신 이미지를 넣고 다음과 같이 할 수 있습니다.

HTML :

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

JQuery :

$("#upfile1").click(function () {
    $("#file1").trigger('click');
});

주의 사항 : IE9 및 IE10에서 자바 스크립트를 통해 파일 입력에서 onclick을 트리거하면 양식이 '위험한'플래그가 지정되고 자바 스크립트로 제출할 수 없으며 전통적으로 제출할 수 있는지 확실하지 않습니다.

— ParPar
소스
2 

        form input[type="file"] {
          display: none;
        }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
  <title>Simple File Upload</title>
  <meta name="" content="">
</head>

<body>
  <form action="upload.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <label for="fileToUpload">
      <img src="http://s3.postimg.org/mjzvuzi5b/uploader_image.png" />
    </label>
    <input type="File" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
  </form>
</body>

</html>
스 니펫 확장

RUN SNIPPET 또는 위의 코드를 복사하여 실행하십시오. 원하는 것을 얻을 수 있습니다. 자바 스크립트없이 매우 간단하고 효과적입니다. 즐겨!!!

— 신피질
소스
슬프게도 theese 방법 :( 나를 위해 사파리에서 작동하지 않습니다
— czLukasss
1

입력 자체는 CSS 가시성으로 숨겨집니다.

그런 다음 앵커 또는 이미지 등 원하는 요소를 가질 수 있습니다. 앵커 / 이미지를 클릭하면 숨겨진 입력 필드를 클릭하면 파일을 선택하는 대화 상자가 나타납니다.

편집 : 실제로 Chrome 및 Safari에서 작동하며 FF4Beta에서는 그렇지 않습니다.

— Petrunov
소스
1

작업 코드 :

입력 부분을 숨기고 이렇게하십시오.

<div class="ImageUpload">
   <label for="FileInput">
      <img src="../../img/Upload_Panel.png" style="width: 18px; margin-top: -316px; margin-left: 900px;"/>
   </label>

  <input id="FileInput" type="file" onchange="readURL(this,'Picture')" style="cursor: pointer;  display: none"/>
</div>
— 사용자 3400389
소스
1

나는 지난 10 년 동안 숨겨진 입력과 보이지 않는 입력에 대해 많은 문제를 겪어 왔으며 때로는 생각보다 상황이 더 간단합니다.

불투명도를 지원하지 않기 위해 IE 5,6,7,8 및 9에서 약간의 소원이 있었으므로 파일 입력이 업로드 이미지를 덮을 것이지만 다음 CSS 코드로 문제가 해결되었습니다.

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);

다음 스니핑은 크롬, IE 5,6,7,8,9,10에서 테스트되었습니다. IE 5의 유일한 문제는 자동 마진을 지원하지 않는다는 것입니다.

스 니펫을 실행하기 만하면 CSS를 복사하여 붙여넣고 원하는대로 크기를 수정합니다.

.file-upload{
	height:100px;
	width:100px;
	margin:40px auto;
	border:1px solid #f0c0d0;
	border-radius:100px;
	overflow:hidden;
	position:relative;
}
.file-upload input{
	position:absolute;
	height:400px;
	width:400px;
	left:-200px;
	top:-200px;
	background:transparent;
	opacity:0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);  
}
.file-upload img{
	height:70px;
	width:70px;
	margin:15px;
}
<div class="file-upload">
<!--place upload image/icon first !-->
<img src="https://i.stack.imgur.com/dy62M.png" />
<!--place input file last !-->
<input type="file" name="somename" />
</div>
스 니펫 확장

— 코드
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.