Заменить тип ввода = файл изображением

Question

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

Что вы, ребята, делаете, когда хотите добавить какой-нибудь стиль к кнопкам вашего файла? Если у вас есть какая-либо точка зрения по этому поводу, просто нажмите кнопку ответа;)

Answer 1

Это действительно хорошо работает для меня:

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

В основном атрибут для метки делает его таким, что нажатие на метку аналогично нажатию на указанный ввод .

Кроме того, свойство display, установленное в none, делает его таким, что ввод файла вообще не отображается, скрывая его красивым и чистым.

Протестировано в Chrome, но по данным веб должно работать на всех основных браузерах. :)

EDIT: Добавлен JSFiddle здесь: https://jsfiddle.net/c5s42vdz/

Answer 2

На самом деле это можно сделать в чистом CSS, и это довольно просто ...

HTML-код

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

Идея состоит в том, чтобы расположить ввод абсолютно внутри вашего ярлыка. установите размер шрифта ввода на что-то большое, что увеличит размер кнопки «Обзор». Затем требуется некоторое количество проб и ошибок, используя отрицательные свойства left / top, чтобы расположить кнопку просмотра ввода позади вашей метки.

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

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

Вы можете увидеть пример здесь (кнопка Добавить трек): http://rakmastering.com/upload/

Answer 3

Отличное решение от @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 тег, чтобы он работал, если тег типа входного файла находится в теге FORM.

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

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

Answer 4

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

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 5

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

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

Answer 6

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

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

Answer 7

        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. Наслаждайтесь !!!

Answer 8

Вместо этого вы можете поместить изображение и сделать это так:

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, если вы запускаете onclick в файле, вводимом через javascript, форма помечается как «опасная» и не может быть передана с помощью javascript, нет уверенности, что она может быть представлена ​​традиционным способом.

Answer 9

Рабочий код:

просто скрыть часть ввода и сделать так.

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

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

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

РЕДАКТИРОВАТЬ: На самом деле это работает в Chrome и Safari, я только заметил, что это не так в FF4Beta