Як і багато людей, я хотів би налаштувати потворне input type=file, і я знаю, що це неможливо зробити без деяких хаків та / або javascript. Справа в тому, що в моєму випадку кнопки завантаження файлу призначені лише для завантаження зображень ( jpeg | jpg | png | gif ), тому мені було цікаво, чи можу я використати " clickable" зображення, яке діятиме саме як файл вхідного типу ( показати діалогове вікно та той самий $ _FILE на представленій сторінці).
Я знайшов тут кілька обхідних шляхів , і цей теж цікавий (але не працює в Chrome = /).

Що ви робите, коли хочете додати стилю до кнопок файлів? Якщо у вас є якась точка зору з цього приводу, просто натисніть кнопку відповіді;)

Це дуже добре працює для мене:

.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 мітки робить так, що клацання мітки є таким самим, як клацання вказаного вводу .

Крім того, властивість display, встановлене як none, робить так, що введення файлу взагалі не відображається, приховуючи його красиво і чисто.

Перевірено в Chrome, але відповідно до Інтернету має працювати у всіх основних браузерах. :)

EDIT: Додано 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;
}

Ідея полягає в тому, щоб розмістити введення абсолютно всередині вашої етикетки. встановіть розмір шрифту вводу на щось велике, що збільшить розмір кнопки "перегляд". Потім потрібні деякі спроби та помилки, використовуючи негативні властивості ліворуч / зверху, щоб розташувати кнопку перегляду вводу за вашим ярликом.

При розташуванні кнопки встановіть для альфа значення 1. По завершенні встановіть його назад на 0 (щоб ви могли бачити, що робите!)

Переконайтеся, що ви тестуєте в браузерах, оскільки всі вони нададуть кнопці введення дещо інший розмір.

Чудове рішення від @hardsetting, але я зробив деякі вдосконалення, щоб він працював із 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щоб випускати сафарі і додав pointer-events: noneвimg тег , щоб зробити його роботу , якщо тип файлу введення тега у вигляді тега.

Здається, це працює для мене у всіх основних браузерах.

Сподіваюся, це комусь допомагає.

Я б використовував SWFUpload або Uploadify . Їм потрібен Flash, але робіть все, що завгодно, без проблем.

Будь-яке <input type="file">обхідне рішення, яке намагається запустити діалогове вікно "відкрити файл" за допомогою інших засобів, крім клацання на фактичному елементі керування, може бути вилучене з браузерів з міркувань безпеки в будь-який час. (Я думаю, що в поточних версіях FF та IE вже неможливо програмно викликати цю подію.)

Це мій метод, якщо я зрозумів вашу думку

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>

це дуже просто, ви можете спробувати це:

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

Ви можете помістити зображення замість цього і зробити це так:

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 : У IE9 та IE10, якщо ви активуєте натискання у введеному файлі за допомогою javascript, форма стає позначеною як "небезпечна" і не може бути перероблена за допомогою javascript, не впевнений, що її можна подати традиційно.

Вхід сам прихований із видимістю CSS: hidden.

Тоді ви можете мати будь-який бажаний вами елемент - якір або зображення ... Коли клацання на якорі / зображенні клацне, натисніть на приховане поле введення - з’явиться діалогове вікно для вибору файлу.

EDIT: Насправді це працює в Chrome і Safari, я просто помітив, що це не так у FF4Beta

Робочий кодекс:

просто сховайте частину введення і зробіть так.

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

        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 або Просто скопіюйте наведений вище код і виконайте. Ви отримаєте те, що хотіли. Дуже простий і ефективний без JavaScript. Насолоджуйтесь !!!

У мене було багато проблем із прихованими та невидимими вхідними даними за останнє десятиліття, іноді все набагато простіше, ніж ми думаємо.

У мене було невелике побажання з 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 та HTML, змініть розмір, як вам подобається.

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