введення файлу тригера jQuery

163

Я намагаюся запустити поле завантаження (кнопка перегляду) за допомогою jQuery.
Метод, який я зараз спробував:

$('#fileinput').trigger('click');

Але це, здається, не працює. Будь ласка, допоможіть. Дякую.

javascript jquery css

— Алек Смарт
джерело

Ви можете спробувати що - щось на зразок цього замість.

— Кіртан

19

Немає цього зробити? Як гнітюче.

— Маркус Даунінг

Депресія справді, і це викликане "клацанням", серйозно? Я дуже віддаю перевагу Flash / AS3, з його щільним API та сильною моделлю безпеки, яка дозволяє викликати FileReference.browse лише від ініційованого користувачем обробника вхідних подій. Крім того, введення HTML-файлів некрасиво та не стильоване (це лише тег введення, стільки для розділення вмісту та стилю), тому вам доведеться зробити нову кнопку "перегляду", яка також активується подією клацання ... який потрібно переслати на введення файлу у вигляді клацання ..., що може призвести до нескінченної рекурсії залежно від розміщення елементів та специфіки делегування події.

— Трайнко

На жаль, використання Flash стає все менш життєздатним, враховуючи постійні проблеми безпеки та зростання блокаторів вмісту.

— Тім

195

Це пов’язано з обмеженням безпеки.

Я з'ясував, що обмеження безпеки є лише тоді, коли <input type="file"/>встановлено значення " display:none;значення" visbilty:hidden.

Тому я спробував розташувати його поза вікном перегляду, встановивши position:absoluteі, щоб top:-100px;він працював.

див. http://jsfiddle.net/DSARd/1/

назвіть це хаком.

Сподіваюся, що працює для вас.

— adardesign
джерело

4

не працює в ff 3.6. працює в хромі та навіть у 8-му

— розмірі

4

Чи є документація на msdn про обмеження безпеки?

— eomeroff

2

Чудово працює. У будь-якому випадку я вважаю, що безпечніше встановити a left: -100px;. Ніколи не знаєш, якою тривалістю може бути сторінка

— Alter Lagos

+1 Це справжня відповідь (і гарне рішення). Хтось має посилання на документацію, де це прямо вказано?

— kontur

9

ви також можете просто встановити непрозорість на 0

— Стюарт

109

це працювало для мене:

JS:

$('#fileinput').trigger('click');

HTML:

<div class="hiddenfile">
  <input name="upload" type="file" id="fileinput"/>
</div>

CSS:

.hiddenfile {
 width: 0px;
 height: 0px;
 overflow: hidden;
}

>>> Ще один, який працює між браузером: <<<

Ідея полягає в тому, щоб ви перекривали невидиму величезну кнопку «Огляд» над власною спеціальною кнопкою. Отже, коли користувач натискає вашу власну кнопку, він фактично натискає кнопку "Огляд" рідного поля введення.

JS Fiddle: http://jsfiddle.net/5Rh7b/

HTML:

<div id="mybutton">
  <input type="file" id="myfile" name="upload"/>
  Click Me!
</div>

CSS:

div#mybutton {

  /* IMPORTANT STUFF */
  overflow: hidden;
  position: relative;   

  /* SOME STYLING */
  width:  50px;
  height: 28px;
  border: 1px solid green;
  font-weight: bold
  background: red;
}

div#mybutton:hover {
  background: green;
}

input#myfile {
  height: 30px;
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 100px;
  z-index: 2;

  opacity: 0.0; /* Standard: FF gt 1.5, Opera, Safari */
  filter: alpha(opacity=0); /* IE lt 8 */
  -ms-filter: "alpha(opacity=0)"; /* IE 8 */
  -khtml-opacity: 0.0; /* Safari 1.x */
  -moz-opacity: 0.0; /* FF lt 1.5, Netscape */
}

JavaScript:

$(document).ready(function() {
    $('#myfile').change(function(evt) {
        alert($(this).val());
    });
});

— сани
джерело

Є один недолік, якщо ви зробите кнопку ширшою, то в IE9 / 10 кнопка завантаження невидимих елементів складається з правої кнопки та лівого текстового поля. На цьому вам потрібно двічі клацнути. У цьому випадку спробуйте встановити розмір шрифту навіть більше 100 пікселів;

— юнзен

Це працює навіть у Chrome 53. Однак, heightпропонується змінити наheight: 100%

— Raptor

Другий працює навіть у Safari на iOS. Дуже хороша!

— Янніс

71

Ви можете використовувати елемент LABEL ex.

<div>
    <label for="browse">Click Me</label>
    <input type="file" id="browse" name="browse" style="display: none">//
</div>

Розгорніть фрагмент

Це запустить вхідний файл

— Джон Рей
джерело

5

Чому це не прийнята відповідь? Це найпростіший спосіб, який не вимагає функціонального javascript.

— tomitrescak

@tomitrescak ОП не чекає отримання найкращої відповіді.

— Махі

9

Майте на увазі, що відповідь була розміщена через 7 років після подання питання.

1

Найкраща відповідь і в 2018 році.

— masoomyf

1

Найкраща відповідь і на 2019 рік;)

— guillaumepotier

17

У мене це працює (= перевірено) в IE8 +, останніх FF та chrome:

$('#uploadInput').focus().trigger('click');

Ключ фокусується перед натисканням клацання (інакше хром його ігнорує).

Примітка: вам НЕОБХІДНО, щоб ваш вклад відображався і був видимим (як у, ні display:noneі ні visibility:hidden). Я пропоную (як і багато інших раніше) абсолютно розмістити вхід і скинути його з екрана.

#uploadInput {
    position: absolute;
    left: -9999px;
}

— Могутня гумова качка
джерело

1

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

— Стево

10

Перевір мою загадку.

http://jsfiddle.net/mohany2712/vaw8k/

.uploadFile {
  visibility: hidden;
}

#uploadIcon {
  cursor: pointer;
}

<body>
  <div class="uploadBox">
    <label for="uploadFile" id="uploadIcon">
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Icon_-_upload_photo_2.svg/512px-Icon_-_upload_photo_2.svg.png"  width="20px" height="20px"/>
    </label>
    <input type="file" value="upload" id="uploadFile" class="uploadFile" />
  </div>
</body>

Розгорніть фрагмент

— Мохан
джерело

9

adardesign прибив її за допомогою елемента введення файлу, який ігнорується, коли він прихований. Я також помітив, що багато людей зміщують розмір елемента на 0 або висувають його за межі з регулюванням позиціонування та переливу. Це все чудові ідеї.
Альтернативний спосіб, який також, здається, працює добре - це просто встановити непрозорість на 0 . Тоді ви завжди можете просто встановити положення, щоб запобігти зсуву інших елементів, як це робить приховування. Просто здається трохи зайвим переміщувати елемент майже на 10 К пікселів у будь-який бік.

Ось невеликий приклад для тих, хто хоче цього:

input[type='file']{
    position:absolute;
    opacity:0;
    /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    /* For IE5 - 7 */
    filter: alpha(opacity=0);
}

— очнийпрам
джерело

7

Просто заради цікавості ви можете зробити щось схоже, динамічно створивши форму для завантаження та вхідний файл, не додаючи його до дерева DOM:

$('.your-button').on('click', function() {
    var uploadForm = document.createElement('form');
    var fileInput = uploadForm.appendChild(document.createElement('input'));

    fileInput.type = 'file';
    fileInput.name = 'images';
    fileInput.multiple = true;

    fileInput.click();
});

Не потрібно додавати форму завантаження до DOM.

— jairhumberto
джерело

1

СПАСИБІ! Я шукав цього 20 хвилин!

— Лабо

5

Правильний код:

<style>
    .upload input[type='file']{
        position: absolute;
        float: left;
        opacity: 0; /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* For IE5 - 7 */
        filter: alpha(opacity=0);
        width: 100px; height: 30px; z-index: 51
    }
    .upload input[type='button']{
        width: 100px;
        height: 30px;
        z-index: 50;
    }
    .upload input[type='submit']{
        display: none;
    }
    .upload{
        width: 100px; height: 30px
    }
</style>
<div class="upload">
    <input type='file' ID="flArquivo" onchange="upload();" />
    <input type="button" value="Selecionar" onchange="open();" />
    <input type='submit' ID="btnEnviarImagem"  />
</div>

<script type="text/javascript">
    function open() {
        $('#flArquivo').click();
    }
    function upload() {
        $('#btnEnviarImagem').click();
    }
</script>

— E9 Sistemas
джерело

4

Це за призначенням і за дизайном. Це питання безпеки.

— Чад Грант
джерело

4

Насправді я знайшов дійсно простий метод для цього, який є:

$('#fileinput').show().trigger('click').hide();

Таким чином, у вашому полі введення файлів може бути відображено властивість css на жодному і все одно виграти торг :)

— skywlkr
джерело

він може блимати на екрані повільної машини. Не оптимальне рішення

— Дмитро Єфіменко

4

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

  <div class="btn-file">
     <input type="file" class="hidden-input">
     Select your new picture
  </div>

// css

.btn-file {
  display: inline-block;
  padding: 8px 12px;
  cursor: pointer;
  background: #89f;
  color: #345;
  position: relative;
  overflow: hidden;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  filter: alpha(opacity=0);
  opacity: 0;
  cursor: inherit;
  display: block;
}

jsbin

демонстрація кнопок введення файлів завантажувального файлу

— Натвар Сінгх
джерело

відповісти ніколи не пізно;)

— AGuyCalledGerald

Через кілька років все-таки найкраща відповідь IMO

— DimmuR

4

Це дуже давнє питання, але, на жаль, це питання все ще є актуальним і потребує вирішення.

(Напрочуд просте) рішення, яке я придумав, - це "приховати" фактичне поле введення файлу і обгорнути його тегом LABEL (для розширення може бути заснований на Bootstrap та HTML5).

See here:Приклад коду тут

Таким чином, поле для введення реального файлу невидиме, і все, що ви бачите, - це налаштована "кнопка", яка насправді є модифікованим елементом LABEL. При натисканні на цей елемент LABEL з'являється вікно вибору файлу, і обраний вами файл перейде в реальне поле введення файлу.

Крім того, ви можете маніпулювати зовнішнім виглядом та поведінкою за своїм бажанням (наприклад: отримати ім'я вибраного файлу з введеного файлу після обраного файлу та показати його десь. Елемент LABEL не робить це автоматично, Звичайно. Я, як правило, просто поміщаю його всередину LABEL, як його зміст тексту).

Будьте обережні, хоча! Маніпулювання поглядом та поведінкою цього обмежується тим, що ви можете собі уявити та подумати. ;-) ;-)

— TheCuBeMan
джерело

3

Мені вдалося за допомогою простого $ (...). Click (); з JQuery 1.6.1

— Валентин Галея
джерело

1

Хм цікаво, як ви це зробили, на моєму веб-сайті (www.iscriptdesign.com) робити $ ('файл: введення'). Click () нічого не робить, а також $ ('файл: введення'). Тригер (' натиснути ');

— д-р Джеррі

Ось повний приклад: <input type = "file" id = "picBrowse" ... а потім $ ('# picBrowse'). Click ();

— Валентин Галея

Я тестував на cr (не впевнений, яка версія) на mac os, хоча працює на FF 4 на XP, хоча. Дякую!

— д-р Джері

3

або ж просто

$(':input[type="file"]').show().click().hide();

— Отважний
джерело

2

У мене виникли проблеми з валідацією користувацької сторони клієнта, <input type="file"/>коли я використовував підроблену кнопку, щоб її запустити, і рішення @Guillaume Bodi працювало на мене (також з opacity: 0;хромом)

$("#MyForm").on("click", "#fake-button", function () {
        $("#uploadInput").focus().trigger("click");
    });

та стиль css для введення даних

#uploadInput {
opacity: 0.0; 
filter: alpha(opacity=0); /* IE lt 8 */
-ms-filter: "alpha(opacity=0)"; /* IE 8 */
-khtml-opacity: 0.0; /* Safari 1.x */
-moz-opacity: 0.0;
}

— Амін К
джерело

1

Спробуйте це, це хак. Позиція: абсолютна - для Chrome, а тригер ("зміни") - IE.

var hiddenFile = $("<input type=\"file\" name=\"file\" id=\"file1\" style=\"position:absolute;left:-9999px\" />");
$('body').append(hiddenFile);

$('#aPhotoUpload').click(function () {
    hiddenFile.trigger('click');
    if ($.browser.msie)
        hiddenFile.trigger('change');
});

hiddenFile.change(function (e) {
    alert('TODO');
});

— тонкий піглін
джерело

Зауважте, що $.browserзастарілі в нових версіях jQuery

— Kevin Beal

1

Моя проблема була трохи іншою в iOS 7. Виявляється, FastClick викликав проблеми. Все, що я мав зробити, - це додати class="needsclick"до своєї кнопки.

— Dex
джерело

0

Це, мабуть, найкраща відповідь, маючи на увазі проблеми з веб-переглядачем.

CSS:

#file {
  opacity: 0;
  width: 1px;
  height: 1px;
}

JS:

$(".file-upload").on('click',function(){
   $("[name='file']").click();
});

HTML:

<a class="file-upload">Upload</a>
<input type="file" name="file">

— Eddsters
джерело

0

Я думаю, що я розумію вашу проблему, тому що у мене є схожа. Таким чином, тег <label>має atribute для, ви можете використовувати цей atribute, щоб зв’язати свій вхід з type = "file". Але якщо ви не хочете активувати це за допомогою цієї мітки, оскільки якесь правило вашого макета, ви можете зробити це так.

$(document).ready(function(){
  var reference = $(document).find("#main");
  reference.find(".js-btn-upload").attr({
     formenctype: 'multipart/form-data'
  });
  
  reference.find(".js-btn-upload").click(function(){
    reference.find("label").trigger("click");
  });
  
});

.hide{
  overflow: hidden;
  visibility: hidden;
  /*Style for hide the elements, don't put the element "out" of the screen*/
}

.btn{
  /*button style*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="main">
<form enctype"multipart/formdata" id="form-id" class="hide" method="post" action="your-action">
  <label for="input-id" class="hide"></label>
  <input type="file" id="input-id" class="hide"/>
</form>

<button class="btn js-btn-upload">click me</button>
</div>

Розгорніть фрагмент

Звичайно, ви пристосуєте це для власних цілей та планування, але це простіший спосіб, який я знаю, щоб змусити його працювати !!

— Леонардо Ліндрот
джерело

-1

На основі відповіді Гійом Боді я зробив це:

$('.fileinputbar-button').on('click', function() {
    $('article.project_files > header, article.upload').show();
    $('article.project_files > header, article.upload header').addClass('active');
    $('.file_content, article.upload .content').show();
    $('.fileinput-button input').focus().click();
    $('.fileinput-button').hide();
});

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

— Стево
джерело