Thay thế kiểu đầu vào = tập tin bằng hình ảnh

Question

Giống như nhiều người, tôi muốn tùy chỉnh loại đầu vào xấu xí = tệp và tôi biết rằng không thể thực hiện được mà không có một số hack và/hoặc javascript. Tuy nhiên, vấn đề là trong trường hợp của tôi, các nút tải lên chỉ là để 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 hình ảnh "có thể nhấp" hoạt động chính xác như một tệp kiểu đầu vào hay không (hiển thị hộp thoại và cùng $ _FILE trên trang đã gửi).
Tôi đã tìm thấy một số cách giải quyết khác here và this interesting one quá (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 cho 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;)

Answer 1

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ỳ giải pháp nào có thể kích hoạt hộp thoại "tệp mở" bằng cách nhấp vào điều khiển thực tế 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ĩ trong các phiên bản hiện tại của FF và IE, nó không thể nữa để kích hoạt sự kiện đó theo chương trình.)

Answer 2

Trên thực tế nó có thể được thực hiện trong css tinh khiết và nó khá dễ dàng ...

HTML Mã

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

CSS Styles

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à để xác định vị trí các đầu vào hoàn toàn bên trong nhãn của bạn. thiết lập kích thước phông chữ của đầu vào cho một cái gì đó lớn, mà sẽ làm tăng kích thước của nút "duyệt". Sau đó, sẽ mất một số thử nghiệm và lỗi bằng cách sử dụng các thuộc tính trái/trên phủ định để định vị nút duyệt đầu vào phía sau nhãn của bạn.

Khi định vị nút, thiết lập alpha để 1. Khi bạn đã hoàn tất cài đặt nó trở về 0 (để bạn có thể xem những gì bạn đang làm!)

Hãy chắc chắn rằng bạn kiểm tra trên các trình duyệt vì họ tất cả sẽ làm cho nút đầu vào có kích thước hơi khác.

Bạn có thể xem ví dụ ở đây (Thêm nút Track): http://rakmastering.com/upload/

Answer 3

Các đầu vào riêng của mình đã giấu với tầm nhìn CSS: ẩn.

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

EDIT: Trên thực tế nó hoạt động trong Chrome và Safari, tôi chỉ nhận thấy đó không phải là trường hợp trong FF4Beta

Answer 4

này hoạt động thực sự tốt cho tôi:

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

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

Với phong cách:

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

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

Ngoài ra, thuộc tính hiển thị được đặt thành không có gì khiến cho đầu vào của tệp không được hiển thị, ẩn nó đẹp và sạch.

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

EDIT: Added JSFiddle đây: https://jsfiddle.net/c5s42vdz/

Answer 5

Bạn có thể đặt một hình ảnh thay vào đó, và làm điều đó 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 đầu vào thông qua javascript biểu mẫu được gắn cờ là 'nguy hiểm' và không thể được submmited với javascript, không chắc chắn nếu nó có thể được gửi truyền thống.

Answer 6

Mã làm việc:

chỉ che giấu một 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> 

Answer 7

Đây là phương pháp của tôi nếu tôi đã nhận quan điểm của 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> 

Answer 8

 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 ĐOẠN hoặc Chỉ cần copy đoạn code 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!!!

Answer 9

của nó thực sự đơn giản bạn có thể thử này:

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

Answer 10

vĩ đại giải pháp bởi @hardsetting, Nhưng tôi thực hiện một số cải tiến để làm cho nó làm việc với Safari (5.1.7) trong cửa sổ

.image-upload > input { 
 
    visibility:hidden; 
 
    width:0; 
 
    height:0 
 
}

<div class="image-upload"> 
 
    <label for="file-input"> 
 
    <img src="placeholder.jpg" style="pointer-events: none"/> 
 
    </label> 
 

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

Tôi đã sử dụng "chế độ hiển thị: ẩn, chiều rộng: 0" thay vì "display: none" cho vấn đề safari và thêm "pointer-events: none" trong thẻ img để làm cho nó hoạt động nếu thẻ loại tệp đầu vào nằm trong thẻ FORM. dường 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 ai đó.