Как и многие люди, я хотел бы настроить некрасивое 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, но, согласно Интернету, должно работать во всех основных браузерах. :)

РЕДАКТИРОВАТЬ: здесь добавлен 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, чтобы разместить кнопку просмотра ввода за вашей меткой.

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

Убедитесь, что вы проводите тестирование в разных браузерах, потому что все они будут отображать кнопку ввода немного другого размера.

Отличное решение от @hardsetting, но я сделал некоторые улучшения, чтобы он работал с Safari (5.1.7) в 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>

Я использовал visibility: hidden, width:0вместо display: noneдля сафари проблемы и добавлены pointer-events: noneв imgтег , чтобы сделать его работу , если тип файла ввода тега в виде тега.

Кажется, у меня работает во всех основных браузерах.

Надеюсь, это кому-то поможет.

Это мой метод, если я понял вашу точку зрения

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>

Я бы использовал SWFUpload или Uploadify . Им нужен Flash, но они все делают без проблем.

Любой <input type="file">обходной путь, который пытается вызвать диалоговое окно «открыть файл» другими способами, кроме щелчка по фактическому элементу управления, может быть удален из браузеров по соображениям безопасности в любое время. (Я думаю, что в текущих версиях FF и IE невозможно запускать это событие программно.)

это действительно просто, вы можете попробовать это:

$("#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');
});

ПРЕДОСТЕРЕЖЕНИЕ : в IE9 и IE10, если вы запускаете onclick при вводе файла через javascript, форма помечается как «опасная» и не может быть отправлена ​​с помощью javascript, не уверен, можно ли ее отправить традиционным образом.

Сам ввод скрыт с помощью CSS visibility: hidden.

Затем у вас может быть любой элемент, который вы хотите - якорь или изображение .., когда якорь / изображение щелкают, запускайте щелчок по скрытому полю ввода - появится диалоговое окно для выбора файла.

РЕДАКТИРОВАТЬ: На самом деле это работает в 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>

ЗАПУСТИТЕ SNIPPET или просто скопируйте приведенный выше код и выполните. Вы получите то, что хотели. Очень просто и эффективно без javascript. Наслаждаться!!!

За последнее десятилетие у меня было много проблем со скрытыми и невидимыми входами, иногда все намного проще, чем мы думаем.

У меня было небольшое желание с IE 5,6,7,8 и 9, чтобы не поддерживать непрозрачность, и поэтому ввод файла будет охватывать загружаемое изображение, однако следующий код css решил проблему.

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

Следующий фрагмент тестируется на Chrome, 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>

Намного лучший способ, чем писать JS, - использовать нативный, и он оказывается легче, чем было предложено:

<label>
  <img src="my-image.png">
  <input type="file" name="myfile" style="display:none">
</label>

Таким образом, labelавтоматически подключается к скрытому входу. Нажатие на ярлык похоже на нажатие на поле.