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

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

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

Ответы

Ответ 1

Это работает очень хорошо для меня:

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

Ответ 2

На самом деле это можно сделать в чистом 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 (чтобы вы могли видеть, что вы делаете!)

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

Ответ 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>

Ответ 4

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

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

Ответ 5

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

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>

Ответ 6

его очень просто вы можете попробовать:

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

Ответ 7

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

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, не уверен, что ее можно отправить традиционно.

Ответ 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>

Ответ 9

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

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

EDIT: на самом деле он работает в Chrome и Safari, я просто заметил, что это не так в FF4Betap >

Ответ 10

Рабочий код:

просто скройте входную часть и сделайте вот так.

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