Giống như rất nhiều người, tôi muốn tùy chỉnh sự xấu xí input type=filevà tôi biết rằng không thể thực hiện được điều đó nếu không có một số hack và / hoặc javascript. Nhưng, vấn đề là trong trường hợp của tôi, các nút tệp tải lên chỉ để tải lên hình ảnh ( jpeg | jpg | png | gif ), vì vậy tôi đã tự hỏi liệu tôi có thể sử dụng clickablehình ảnh "" hoạt động chính xác như một tệp loại đầu vào ( hiển thị hộp thoại và cùng một $ _FILE trên trang đã gửi).
Tôi đã tìm thấy một số giải pháp ở đây và giải pháp này cũng thú vị (nhưng không hoạt động trên Chrome = /).

Các bạn làm gì khi muốn thêm một số kiểu vào các nút tệp của mình? Nếu bạn có bất kỳ quan điểm nào về nó, chỉ cần nhấn nút trả lời;)

Điều này thực sự hiệu quả đối với tôi:

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

Về cơ bản, thuộc tính for của nhãn làm cho nó để nhấp vào nhãn giống như nhấp vào đầu vào được chỉ định .

Ngoài ra, thuộc tính hiển thị được đặt thành không làm cho đầu vào tệp hoàn toàn không được hiển thị, ẩn nó đẹp và sạch sẽ.

Đã thử nghiệm trong Chrome nhưng theo web nên hoạt động trên tất cả các trình duyệt chính. :)

CHỈNH SỬA: Đã thêm JSFiddle tại đây: https://jsfiddle.net/c5s42vdz/

Trên thực tế, nó có thể được thực hiện bằng css thuần túy và nó khá dễ dàng ...

Mã HTML

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

Kiểu 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;
}

Ý tưởng là đặt đầu vào hoàn toàn bên trong nhãn của bạn. đặt kích thước phông chữ của đầu vào thành một thứ gì đó lớn, điều này sẽ làm tăng kích thước của nút "duyệt". Sau đó, sẽ mất một số lần thử và gặp lỗi khi sử dụng các thuộc tính âm trái / trên cùng để đặt nút duyệt đầu vào phía sau nhãn của bạn.

Khi định vị nút, hãy đặt alpha thành 1. Khi bạn hoàn thành, hãy đặt nó về 0 (để bạn có thể biết mình đang làm gì!)

Đảm bảo bạn kiểm tra trên các trình duyệt vì tất cả chúng sẽ hiển thị nút đầu vào có kích thước hơi khác một chút.

Giải pháp tuyệt vời của @hardsetting, Nhưng tôi đã thực hiện một số cải tiến để làm cho nó hoạt động với Safari (5.1.7) trong 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>

Tôi đã sử dụng visibility: hidden, width:0thay vì display: nonecho vấn đề safari và thêm pointer-events: nonevào imgthẻ để làm cho nó hoạt động nếu thẻ loại tệp đầu vào nằm trong thẻ FORM.

Có vẻ như làm việc cho tôi trong tất cả các trình duyệt chính.

Hy vọng nó sẽ giúp một ai đó.

Tôi sẽ sử dụng SWFUpload hoặc Uploadify . Họ cần Flash nhưng làm mọi thứ bạn muốn mà không gặp rắc rối.

Bất kỳ <input type="file">giải pháp dựa trên nào cố gắng kích hoạt hộp thoại "mở tệp" bằng các phương tiện khác ngoài việc nhấp vào điều khiển thực tế đều có thể bị xóa khỏi trình duyệt vì lý do bảo mật bất kỳ lúc nào. (Tôi nghĩ rằng trong các phiên bản hiện tại của FF và IE, không thể kích hoạt sự kiện đó theo chương trình nữa.)

Đây là phương pháp của tôi nếu tôi hiểu ý bạn

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>

nó thực sự đơn giản, bạn có thể thử điều này:

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

Thay vào đó, bạn có thể đặt một hình ảnh và làm như thế này:

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 : Trong IE9 và IE10 nếu bạn kích hoạt onclick trong một tệp nhập thông qua javascript, biểu mẫu sẽ bị gắn cờ là 'nguy hiểm' và không thể bị giới hạn phụ với javascript, không chắc chắn nếu nó có thể được gửi thương mại.

        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>

CHẠY SNIPPET hoặc Chỉ cần sao chép đoạn mã trên và thực thi. Bạn sẽ có được những gì bạn muốn. Rất đơn giản và hiệu quả mà không cần javascript. Thưởng thức!!!

Bản thân đầu vào bị ẩn với khả năng hiển thị CSS: hidden.

Sau đó, bạn có thể có bất kỳ phần tử nào bạn chọn - anchor hoặc image .., khi anchor / image được nhấp, hãy kích hoạt một cú nhấp chuột vào trường nhập ẩn - hộp thoại chọn tệp sẽ xuất hiện.

CHỈNH SỬA: Trên thực tế, nó hoạt động trong Chrome và Safari, tôi chỉ nhận thấy rằng điều đó không đúng với trường hợp của FF4Beta

Mã làm việc:

chỉ cần ẩn phần đầu vào và làm như thế này.

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

Tôi đã gặp rất nhiều vấn đề với các đầu vào ẩn và không hiển thị trong thập kỷ qua, đôi khi mọi thứ đơn giản hơn chúng ta nghĩ.

Tôi đã có một chút mong muốn với IE 5,6,7,8 và 9 vì không hỗ trợ độ mờ và do đó đầu vào tệp sẽ che ảnh tải lên tuy nhiên mã css sau đã giải quyết được vấn đề.

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

Đoạn mã sau đây được thử nghiệm trên chrome, IE 5,6,7,8,9,10, vấn đề duy nhất trong IE 5 là nó không hỗ trợ tính năng tự động lề.

Chạy đoạn mã chỉ cần sao chép và dán CSS và HTML sửa đổi kích thước theo ý muốn.

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