тип вводу = кнопка показує лише файл

Чи існує спосіб, щоб <input type=file />елемент стилю (або сценарію) бачив лише кнопку "Огляд" без текстового поля?

Дякую

Редагувати : Просто для уточнення, чому мені це потрібно. Я використовую код для завантаження кількох файлів з http://www.morningz.com/?p=5, і йому не потрібно текстового поля для введення, оскільки він ніколи не має значення. Сценарій просто додає щойно вибраний файл до колекції на сторінці. Це було б набагато краще без текстового поля, якщо це можливо.

<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />

Це, безумовно, спрацює, я використовував це у своїх проектах. Сподіваюся, це допоможе :)

У мене був чорт часу, намагаючись досягти цього. Я не хотів використовувати рішення Flash, і жодна з бібліотек jQuery, на яку я дивився, не була надійною для всіх браузерів.

Я придумав власне рішення, яке повністю реалізовано в CSS (за винятком зміни стилю onclick, щоб кнопка виглядала "натиснутою").

Можна спробувати робочий приклад тут: http://jsfiddle.net/VQJ9V/307/ (перевірено у FF 7, IE 9, Safari 5, Opera 11 та Chrome 14)

Він працює, створюючи великий вхід файлу (з розміром шрифту: 50 пікселів), потім обертаючи його в div, який має фіксований розмір і переповнення: приховано. Потім вхід буде видно лише через цей "віконний" розділ. Диві можна надати фонове зображення або колір, текст можна додати, а введення можна зробити прозорим, щоб розкрити фон div:

HTML:

<div class="inputWrapper">
    <input class="fileInput" type="file" name="file1"/>
</div>

CSS:

.inputWrapper {
    height: 32px;
    width: 64px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    /*Using a background color, but you can use a background image to represent a button*/
    background-color: #DDF;
}
.fileInput {
    cursor: pointer;
    height: 100%;
    position:absolute;
    top: 0;
    right: 0;
    z-index: 99;
    /*This makes the button huge. If you want a bigger button, increase the font size*/
    font-size:50px;
    /*Opacity settings for all browsers*/
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}

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

Сьогодні я витратив день на роботу. Я не знайшов жодного з рішень, що працювали в кожному з моїх сценаріїв.

Потім я згадав, що побачив приклад завантаження файлу JQuery без текстового поля. Тож, що я зробив, це те, що я взяв їхній приклад і позбавив його відповідної частини.

Це рішення принаймні працює для IE та FF і може бути повністю стильовим. У наведеному нижче прикладі введення файлу приховано під фантазійною кнопкою "Додати файли".

<html>

<head>
    <title>jQuery File Upload Example</title>
    <style type="text/css">
        .myfileupload-buttonbar input
        {
            position: absolute;
            top: 0;
            right: 0;
            margin: 0;
            border: solid transparent;
            border-width: 0 0 100px 200px;
            opacity: 0.0;
            filter: alpha(opacity=0);
            -o-transform: translate(250px, -50px) scale(1);
            -moz-transform: translate(-300px, 0) scale(4);
            direction: ltr;
            cursor: pointer;
        }
        .myui-button
        {
            position: relative;
            cursor: pointer;
            text-align: center;
            overflow: visible;
            background-color: red;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="fileupload" >
        <div class="myfileupload-buttonbar ">
            <label class="myui-button">
                <span >Add Files</span>
                <input id="file" type="file" name="files[]" />
            </label>
        </div>
    </div>
</body>
</html>

Сховати елемент вхідного файлу та створити видиму кнопку, яка спровокує подію натискання цього вхідного файлу.

Спробуйте це:

CSS

#file { width:0; height:0; } 

HTML:

<input type='file' id='file' name='file' />
<button id='btn-upload'>Upload</button>

JAVASCRIPT (jQuery):

$(function(){
    $('#btn-upload').click(function(e){
        e.preventDefault();
        $('#file').click();}
    );
});

Сховати тег вхідного файлу за допомогою css, додати мітку та призначити її кнопці введення. мітку можна натискати, і при натисканні вона відкриє діалогове вікно файлу.

<input type="file" name="imageUpload" id="imageUpload" class="hide"/> 
<label for="imageUpload" class="button-style">Select file</label>

Додайте стиль до мітки як кнопку.
Демонстраційна демонстрація

Це буде дуже важко. Проблема типу введення файлу полягає в тому, що він, як правило, складається з двох візуальних елементів, при цьому трактується як єдиний DOM-елемент. Додайте до цього, що кілька браузерів мають свій власний вигляд та вклад у файл, і ви налаштовані на кошмар. Дивіться цю статтю на quirksmode.org про примхи у файлі. Я гарантую вам, що це не зробить вас щасливим (я кажу з досвіду).

[EDIT]

Насправді, я думаю, ви можете уникнути, помістивши свій вклад у елемент контейнера (наприклад, div) та додавши до елемента негативний запас. Ефективно приховує частину текстового поля поза екраном. Іншим варіантом було б використовувати техніку в статті, яку я пов’язував, щоб спробувати її стиль, як кнопку.

Виправити роботу у всіх переглядачах:

      <input type = "button" value = "Choose image" 
       onclick ="javascript:document.getElementById('imagefile').click();">
      <input id = "imagefile" type="file" style='visibility: hidden;' name="img"/>

Я пройшов тестування на FF, Chrome і IE - добре працював, також застосовував стилі: D

Я спробував реалізувати два найкращих рішення, і це виявилося для мене ВЕЛИЧЕЗНОЮ тратою часу. Зрештою, застосування цього .css класу вирішило проблему ...

input[type='file'] {
  color: transparent;
}

Готово! супер чисто і супер просто ...

Ще один простий спосіб зробити це. Створіть тег "файл типу введення" в html та прихойте його. Потім натисніть кнопку та відформатуйте її відповідно до потреби. Після цього використовуйте javascript / jquery для програмного натискання тегу введення при натисканні кнопки.

HTML: -

<input id="file" type="file" style="display: none;">
<button id="button">Add file</button>

JavaScript: -

document.getElementById('button').addEventListener("click", function() {
    document.getElementById('file').click();
});

jQuery: -

$('#button').click(function(){
    $('#file').click();
});

CSS: -

#button
{
    background-color: blue;
    color: white;
}

Ось робоча загадка JS для того ж: - http://jsfiddle.net/32na3/

Я використав частину рекомендованого вище коду, і після багатьох годин відмови від свого часу я врешті-решт дійшов до безкоштовного рішення з пакетом css.

Ви можете запустити його тут - http://jsfiddle.net/WqGph/

але тоді знайшлося краще рішення - http://jsfiddle.net/XMMc4/5/

 <input type = "button" value = "Choose image #2" 
   onclick ="javascript:document.getElementById('imagefile').click();">
       <input id = "imagefile" type="file" style='display:none;' name="img" value="none"/>see jsfiddle code for examples<br/>

Ось мій добрий засіб:

<input type="file" id="myFile" style="display:none;" />
<button type="button" onclick="document.getElementById('myFile').click();">Browse</button>

Принаймні, це працювало в Safari.

Простий і простий.

Ви можете позначити зображення так, що при натисканні на нього спрацює подія натискання кнопки. Ви можете просто зробити звичайну кнопку невидимою:

<form>
    <label for="fileButton"><img src="YourSource"></label>    <!--You don't have to put an image here, it can be anything you like-->
    <input type="file" id="fileButton" style="display:none;"/>
</form>

Він працював на мене на всіх браузерах і дуже простий у використанні.

Ви можете відправити подію натискання на прихований вхід файлу, як це:

<form action="#type your action here" method="POST" enctype="multipart/form-data">
   		<div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" >Click to upload!</div>
    	<!-- hide input[type=file]!-->
    	<div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
    	<input type="submit" value='submit' >
    </form>

    <script type="text/javascript">
    	var btn = document.getElementById("yourBtn");
    	var upfile = document.getElementById("upfile"); 
    	btn.addEventListener('click',function(){
    		if(document.createEvent){
    			var ev = document.createEvent('MouseEvents');
    			ev.initEvent('click',true,false);
    			upfile.dispatchEvent(ev);
    		}else{
        		upfile.click();
    		}
    	});
    
    </script>

HTML:

<input type="file" name="upload" id="upload" style="display:none"></input>
    <button  id="browse">Upload</button>

ПІДКЛЮЧЕННЯ

 $(document).ready(function(){
        $("#browse").click(function(){
        $("#upload").click();
        });
 });

Сподіваюся, це працює :)

Ви можете надати вхідному елементу непрозорість шрифту 0. Це дозволить приховати текстове поле, не приховуючи кнопку "Вибрати файли".

Не потрібен JavaScript, очистіть перехресний браузер аж до IE 9

Наприклад,

input {color: rgba(0, 0, 0, 0);}

Ive дійсно hacky рішення з цим ...

<style type="text/css"> 
    input[type="file"]
    { 
        width: 80px;        
    } 
</style>

<input id="File1" type="file" />

Проблема полягає в атрибуті ширини, який приховує текстове поле, різко змінюватиметься між браузерами, змінюватись між темами Windows XP тощо. Можливо, це щось, з чим ви можете працювати? ...

Я знаю, що це стара публікація, але простий спосіб зникнення тексту - це просто встановити колір тексту відповідно до твого фону.

наприклад, якщо фон для введення тексту білий, то:

input[type="file"]{
color:#fff;
}

Це не вплине на текст вибору файлу, який все ще буде чорним через браузер.

Це працює для мене:

input[type="file"]  {
    color: white!important;
}

моє рішення полягає лише в тому, щоб встановити його в div, як сказав "druveen", проте я оголошу свій стиль кнопки діві (зробіть це схожим на кнопку з: наведення курсора), і я просто встановив стиль "непрозорість: 0;" на вхід. Діє принадність для мене, сподіваюся, що це робить те саме.

Я просто стилізував вхідний файл шириною: 85 пікселів, а текстове поле зовсім зникло

Цей HTML-код відображається лише кнопкою "Завантажити файл"

<form action="/action_page.php">
    <input type="button" id="id" value="Upload File"  onclick="document.getElementById('file').click();" />
    <input type="file" style="display:none;" id="file" name="file" onchange="this.form.submit()"/>  
</form>

<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo"> 

$("#logo").css('opacity','0');

$("#select_logo").click(function(){
   $().trigger('click');
   return false;
});

Для мене найпростіший спосіб - використовувати такий колір шрифту, як колір фону. Простий, не елегантний, але корисний.

<div style="color:#FFFFFF">   <!-- if background page is white, of course -->
<input class="fileInput" type="file" name="file1"/></div>

Тож ось найкращий спосіб це зробити для ВСІХ БРОЗЕРІВ:

Забудьте про CSS!

<p>Append Image:</p> 
<input type="button" id="clickImage" value="Add Image" />
<input type="file" name="images[]" id="images" multiple />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" charset="utf-8"></script>

<script>
$('#images').hide();        
$('#clickImage').click( function() {    
    $('#images').trigger('click');  
});
</script>

Усі ці відповіді милі, але CSS не працюватиме, оскільки він не однаковий у всіх браузерах та пристроях, перша відповідь, яку я написав, буде працювати у всьому, крім Safari. Щоб він працював у всіх браузерах весь час, його потрібно створювати динамічно та відтворювати кожен раз, коли потрібно очистити вхідний текст:

    var imageDiv = document.createElement("div");   
    imageDiv.setAttribute("id", "imagediv");
    imageDiv.style.cssText = 'position:relative; vertical-align: bottom;';  
    var imageText = document.createTextNode("Append Image:");
    var newLine = document.createElement("br"); 
    var image = document.createElement("input");    
    image.setAttribute("type", "file");
    image.setAttribute("id", "images");
    image.setAttribute("name", "images[]");     
    image.setAttribute("multiple", "multiple");
    imageDiv.appendChild(imageText); 
    imageDiv.appendChild(newLine); 
    imageDiv.appendChild(image); 
    questionParagraph.appendChild(imageDiv);

Відповідь tmanthey досить хороша, за винятком того, що ви не можете грати з шириною кордону у Firefox v20. Якщо ви бачите посилання (демонстраційне, тут не можна реально показувати), вони вирішили проблему, використовуючи шрифт-розмір = 23px, перетворення: перекладіть (-300px, 0px) шкалу (4) для Firefox, щоб збільшити кнопку.

Інші рішення, що використовують .click () для іншого діва, марні, якщо ви хочете зробити це полем для введення drag'n'drop.

Тут є кілька дійсних варіантів, але я думав, що я б дав те, що я придумав, намагаючись виправити подібну проблему. http://jsfiddle.net/5RyrG/1/

<span class="btn fileinput-button">
    <span>Import Field(s)</span>
    <input id="fileupload" type="file" name="files[]" onchange="handleFiles(this.files)" multiple>
</span>
<div id="txt"></div>

function handleFiles(files){
    $('#txt').text(files[0].name);  
}

Розв’язано із наступним кодом:

<div style="overflow: hidden;width:83px;"> <input style='float:right;' name="userfile" id="userfile" type="file"/> </div>

Я написав це:

<form action='' method='POST' name='form-upload-image' id='form-upload-image' enctype='multipart/form-data'>

    <div style="width: 0; height: 0; overflow: hidden;">
        <input type="file" name="input-file" id="input-file" onchange="this.files.length > 0 ? document.getElementById('form-upload-image').submit():null;" />
    </div>
    
</form>

<img src="image.jpg" style="cursor: pointer;" onclick="document.getElementById('input-file').click();" />

Працюйте чудово у всіх браузерах, без jQuery, без CSS.

Ось спрощена версія популярного рішення @ ampersandre, яка працює у всіх основних браузерах. Розмітка Asp.NET

<asp:TextBox runat="server" ID="FilePath" CssClass="form-control"
    style="float:left; display:inline; margin-right:5px; width:300px"
    ReadOnly="True" ClientIDMode="Static" />
<div class="inputWrapper">
    <div id="UploadFile" style="height:38px; font-size:16px; 
      text-align:center">Upload File</div>
    <div>
      <input name="FileUpload" id="FileInput" runat="server" 
             type="File" />
    </div>
  </div>
  <asp:Button ID="UploadButton" runat="server" 
    style="display:none" OnClick="UploadButton_Click" />
</div>
<asp:HiddenField ID="hdnFileName" runat="server" ClientIDMode="Static" />

Код JQuery

$(document).ready(function () {

   $('#UploadFile').click(function () {
       alert('UploadFile clicked');
       $('[id$="FileInput"]').trigger('click');
   });

   $('[id$="FileInput"]').change(function (event) {
       var target = event.target;
       var tmpFile = target.files[0].name;
       alert('FileInput changed:' + tmpFile);
       if (tmpFile.length > 0) {
          $('#hdnFileName').val(tmpFile);
       }
       $('[id$="UploadButton"]').trigger('click');
   });
});

код css

.inputWrapper {
height: 38px;
width: 102px;
overflow: hidden;
position: relative;
padding: 6px 6px;
cursor: pointer;
white-space:nowrap;
/*Using a background color, but you can use a background image to represent
 a button*/
background-color: #DEDEDE;
border: 1px solid gray;
border-radius: 4px;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}

Використовується прихований тригер клацання "UploadButton" для післягарантійного серверного сервера зі стандартним. Текст "Завантажити файл" витісняє елемент керування введенням із поля перегляду в розділ обгортки, коли він переповнюється, тому немає необхідності застосовувати будь-які стилі для контрольного діва "введення файлу". Селектор $ ([id $ = "FileInput"]) дозволяє розділити ідентифікатори із застосованими стандартними префіксами ASP.NET. Значення текстового поля FilePath, встановлене з коду сервера позаду від hdnFileName.Value після завантаження файлу.