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

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

---

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

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

---

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

.image-upload>input {
  display: none;
}

<div class="image-upload">
  <label for="file-input">
    <img src="placeholder.jpg"/>
  </label>

  <input id="file-input" type="file" />
</div>

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

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

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

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

---

실제로 순수한 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 속성을 사용하여 입력 찾아보기 버튼을 레이블 뒤에 배치하는 데 시행 착오가 걸립니다.

When positioning the button, set the alpha to 1. When you've finished set it back to 0 (so you can see what you're doing!)

Make sure you test across browsers because they'll all render the input button a slightly different size.

---

Great solution by @hardsetting, But I made some improvements to make it work with Safari(5.1.7) in windows

.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>

I have used visibility: hidden, width:0 instead of display: none for safari issue and added pointer-events: none in img tag to make it working if input file type tag is in FORM tag.

Seems working for me in all major browsers.

Hope it helps someone.

---

I would use SWFUpload or Uploadify. They need Flash but do everything you want without troubles.

Any <input type="file"> based workaround that tries to trigger the "open file" dialog by means other than clicking on the actual control could be removed from browsers for security reasons at any time. (I think in the current versions of FF and IE, it is not possible any more to trigger that event programmatically.)

---

This is my method if i got your point

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>

---

its really simple you can try this:

$("#image id").click(function(){
    $("#input id").click();
});

---

You can put an image instead, and do it like this:

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');
});

CAVEAT: In IE9 and IE10 if you trigger the onclick in a file input via javascript the form gets flagged as 'dangerous' and cannot be submmited with javascript, no sure if it can be submitted traditionaly.

---

        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 or Just copy the above code and execute. You will get what you wanted. Very simple and effective without javascript. Enjoy!!!

---

The input itself is hidden with CSS visibility:hidden.

Then you can have whatever element you whish - anchor or image.., when the anchor/image is clicked, trigger a click on the hidden input field - the dialog box for selecting a file will appear.

EDIT: Actually it works in Chrome and Safari, I just noticed that is not the case in FF4Beta

---

Working Code:

just hide input part and do like this.

<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>

참고URL : https://stackoverflow.com/questions/2855589/replace-input-type-file-by-an-image