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

Question

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

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

Answer 1

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

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

Answer 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 (так что вы можете увидеть, что вы делаете!)

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

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

Answer 3

Входное гнездо сам скрыт с видимостью CSS: скрытый.

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

EDIT: На самом деле он работает в Chrome и Safari, я только заметил, что это не так в FF4Beta

Answer 4

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

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

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

С стайлинга:

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

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

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

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

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

Answer 5

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

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 6

Рабочий код:

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

<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

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

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 SNIPPET или просто скопируйте приведенный выше код и выполнить. Вы получите то, что хотите. Очень простой и эффективный без javascript. Наслаждаться!!!

Answer 9

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

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

Answer 10

Великое решение по @hardsetting, Но я сделал некоторые улучшения, чтобы заставить его работать с Safari (5.1.7) в окнах

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

Я использовал "видимость: скрытый, ширина: 0" вместо "дисплей: нет" для проблемы сафари и добавил «указатель-события: нет» в теге img, чтобы он работал, если тег типа входного файла находится в теге FORM. кажется, работает для меня во всех основных браузерах. Надеюсь, это поможет кому-то.