Eingabe der jQuery-Triggerdatei

163

Ich versuche mit jQuery eine Upload-Box (Schaltfläche zum Durchsuchen) auszulösen.
Die Methode, die ich jetzt ausprobiert habe, ist:

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

Aber es scheint nicht zu funktionieren. Bitte helfen Sie. Danke dir.

javascript jquery css Alec Smart
quelle

Sie können so etwas wie versuchen , diese stattdessen.

Kirtan

19

Es gibt keine Möglichkeit, dies zu tun? Wie deprimierend.

Marcus Downing

Depressiv in der Tat, und es wird durch "Klicken" ausgelöst, ernsthaft? Ich bevorzuge Flash / AS3 mit seiner engen API und dem starken Sicherheitsmodell, mit dem FileReference.browse nur von einem vom Benutzer initiierten Eingabeereignishandler aufgerufen werden kann. Darüber hinaus ist die Eingabe von HTML-Dateien hässlich und nicht stilisierbar (es ist nur ein Eingabe-Tag, so sehr zur Trennung von Inhalt und Stil), sodass Sie eine neue Schaltfläche zum Durchsuchen erstellen müssen, die auch durch ein Klickereignis aktiviert wird ... Dies müssen Sie als Klick an die Dateieingabe weiterleiten. Dies kann je nach Elementplatzierung und Spezifität der Ereignisdelegierung zu einer unendlichen Rekursion führen.

Triynko

Leider wird die Verwendung von Flash aufgrund der ständigen Sicherheitsprobleme und der zunehmenden Verbreitung von Inhaltsblockern immer weniger praktikabel.

Tim

195

Dies ist auf eine Sicherheitsbeschränkung zurückzuführen.

Ich habe herausgefunden, dass die Sicherheitsbeschränkung nur dann besteht, wenn das <input type="file"/>auf display:none;oder eingestellt ist visbilty:hidden.

Also versuchte ich es aus dem Bildfenster , indem die Positionierung position:absoluteund top:-100px;und voilà es funktioniert.

siehe http://jsfiddle.net/DSARd/1/

Nennen wir es einen Hack.

Hoffe das funktioniert bei dir.

Adardesign
quelle

4

funktioniert nicht in ff 3.6. funktioniert in Chrom und sogar in ie 8 obwohl :)

AyKarsi

4

Gibt es auf msdn eine Dokumentation zur Sicherheitsbeschränkung?

Eomeroff

2

Funktioniert super. Auf jeden Fall halte ich es für sicherer, a left: -100px;. Sie wissen nie, wie lange eine Seite sein könnte

Alter Lagos

+1 Dies ist die wahre Antwort (& eine gute Lösung). Hätte jemand einen Link zur Dokumentation, wo dies ausdrücklich angegeben ist?

Kontur

9

Sie können auch einfach die Deckkraft auf 0 setzen

Stuart

109

das hat bei mir funktioniert:

JS:

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

HTML:

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

CSS:

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

>>> Eine andere, die Cross-Browser funktioniert: <<<

Die Idee ist, dass Sie eine unsichtbare riesige Schaltfläche "Durchsuchen" über Ihre benutzerdefinierte Schaltfläche legen. Wenn der Benutzer auf Ihre benutzerdefinierte Schaltfläche klickt, klickt er tatsächlich auf die Schaltfläche "Durchsuchen" des nativen Eingabefelds.

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

Schlitten
quelle

Wenn Sie die Schaltfläche breiter machen, gibt es einen Fehler: In IE9 / 10 besteht die unsichtbare Upload-Schaltfläche aus der rechten Schaltfläche und einem linken Textfeld. Darauf müssen Sie doppelklicken. Versuchen Sie in diesem Fall, die Schriftgröße noch größer als 100 Pixel einzustellen.

Yunzen

Dies funktioniert sogar in Chrome 53. Es wird jedoch heightempfohlen, zuheight: 100%

Raptor

Der zweite funktioniert sogar in Safari unter iOS. Sehr schön!

Jannis

69

Sie können das LABEL-Element ex verwenden.

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

Erweitern Sie das Snippet

Dies löst die Eingabedatei aus

Jhon Rey
quelle

5

Warum ist das nicht die akzeptierte Antwort? Es ist der einfachste Weg, der kein funky Javascript erfordert.

Tomitrescak

@ Tomitrescak Das OP wartet nicht auf die beste Antwort.

Mahi

9

Beachten Sie, dass die Antwort 7 Jahre nach dem Absenden der Frage veröffentlicht wurde.

1

Beste Antwort auch 2018.

Masoomyf

1

Beste Antwort auch für 2019;)

Guillaumepotier

17

Ich habe es funktioniert (= getestet) in IE8 +, aktuelle FF und Chrome:

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

Die Taste fokussiert vor dem Auslösen des Klicks (andernfalls wird er von Chrome ignoriert).

Hinweis: Sie MÜSSEN Ihre Eingabe anzeigen und sichtbar machen (wie in, nicht display:noneund nicht visibility:hidden). Ich schlage vor (wie viele andere zuvor), den Eingang absolut zu positionieren und vom Bildschirm zu werfen.

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

Die mächtige Gummiente
quelle

1

+1 dafür. Mir ist auch aufgefallen, dass Sie das umgebende Element, aber nicht die Dateieingabeschaltfläche ausblenden, dann das umgebende Element anzeigen, die Schaltfläche fokussieren, aktivieren und dann die Schaltfläche ausblenden können.

Stevo

10

Schau dir meine Geige an.

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>

Erweitern Sie das Snippet

Mohan
quelle

9

adardesign hat es geschafft, dass das Dateieingabeelement ignoriert wird, wenn es ausgeblendet ist. Ich bemerkte auch, dass viele Leute die Elementgröße auf 0 verschoben oder sie durch Positionierungs- und Überlaufanpassungen aus dem Rahmen schoben. Das sind alles großartige Ideen.
Eine alternative Methode, die ebenfalls einwandfrei zu funktionieren scheint, besteht darin , die Deckkraft auf 0 zu setzen . Dann können Sie immer nur die Position festlegen, um zu verhindern, dass andere Elemente wie beim Ausblenden versetzt werden. Es scheint nur ein wenig unnötig, ein Element um fast 10 KB Pixel in eine beliebige Richtung zu verschieben.

Hier ist ein kleines Beispiel für diejenigen, die eines wollen:

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

Eyegropram
quelle

7

Aus Neugier können Sie etwas tun, was Sie möchten, indem Sie dynamisch ein Upload-Formular und eine Eingabedatei erstellen, ohne sie dem DOM-Baum hinzuzufügen:

$('.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();
});

Sie müssen die uploadForm nicht zum DOM hinzufügen.

jairhumberto
quelle

1

DANKE! Ich habe seit 20 Minuten danach gesucht!

Labo

5

Richtiger Code:

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

4

Das ist absichtlich und beabsichtigt. Es ist ein Sicherheitsproblem.

Chad Grant
quelle

4

Eigentlich habe ich eine wirklich einfache Methode dafür gefunden, nämlich:

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

Auf diese Weise kann in Ihrem Dateieingabefeld die CSS-Eigenschaft auf keiner angezeigt werden und trotzdem den Handel gewinnen :)

skywlkr
quelle

Auf dem langsameren Computer wird möglicherweise der Bildschirm angezeigt. Keine optimale Lösung

Dmitry Efimenko

4

Es ist zu spät, um zu antworten, aber ich denke, dass dieses minimale Setup am besten funktioniert. Ich suche auch das gleiche.

  <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

Demo der Eingabetasten für Bootstrap-Dateien

Natwar Singh
quelle

es ist nie zu spät zu antworten;)

AGuyCalledGerald

Wenige Jahre später noch am besten antworten IMO

DimmuR

4

Dies ist eine sehr alte Frage, aber leider ist dieses Problem immer noch relevant und erfordert eine Lösung.

Die (überraschend einfache) Lösung, die ich mir ausgedacht habe, besteht darin, das eigentliche Dateieingabefeld zu "verbergen" und es mit einem LABEL-Tag zu versehen (kann zur Verbesserung auf Bootstrap und HTML5 basieren).

See here:Beispielcode hier

Auf diese Weise ist das Eingabefeld für die reale Datei unsichtbar und Sie sehen nur die angepasste "Schaltfläche", die tatsächlich ein modifiziertes LABEL-Element ist. Wenn Sie auf dieses LABEL-Element klicken, wird das Fenster zur Auswahl einer Datei geöffnet und die von Ihnen ausgewählte Datei wird in das Eingabefeld für die reale Datei verschoben.

Darüber hinaus können Sie das Aussehen und Verhalten nach Ihren Wünschen ändern (z. B. den Namen der ausgewählten Datei nach der Auswahl aus der Dateieingabedatei abrufen und irgendwo anzeigen. Das LABEL-Element führt dies nicht automatisch aus. Natürlich. Normalerweise lege ich es einfach als Textinhalt in das ETIKETT.

Aber Vorsicht! Die Manipulation des Aussehens und Verhaltens ist auf alles beschränkt, was Sie sich vorstellen und denken können. ;-) ;-)

TheCuBeMan
quelle

3

Ich habe es mit einem einfachen $ (...) geschafft. Click (); mit JQuery 1.6.1

Valentin Galea
quelle

1

Hmm neugierig, wie Sie das gemacht haben, auf meiner Website (www.iscriptdesign.com) macht ein $ ('Datei: Eingabe'). Click () macht nichts, noch $ ('Datei: Eingabe'). Trigger (' klicken');

Dr. Jerry

Hier ist das vollständige Beispiel: <input type = "file" id = "picBrowse" ... und dann $ ('# picBrowse'). Click ();

Valentin Galea

Ich habe auf cr (nicht sicher, welche Version) auf Mac OS getestet, funktioniert aber auf FF 4 unter XP. Vielen Dank!

Dr.

3

oder einfach

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

Otvazhnii
quelle

2

Ich hatte Probleme mit der benutzerdefinierten clientseitigen Validierung, <input type="file"/>während ich eine gefälschte Schaltfläche zum Auslösen verwendete, und die Lösung von @Guillaume Bodi funktionierte für mich (auch mit opacity: 0;auf Chrom).

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

und CSS-Stil für Upload-Eingabe

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

Amin K.
quelle

1

Versuchen Sie dies, es ist ein Hack. Die Position: absolut ist für Chrome und Trigger ('change') ist für 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');
});

Thinpiglin
quelle

Beachten Sie, dass $.browserin neueren Versionen von jQuery

Kevin Beal

1

Mein Problem war unter iOS 7 etwas anders. Es stellte sich heraus, dass FastClick Probleme verursachte. Alles was ich tun musste, war class="needsclick"meinen Button hinzuzufügen .

Dex
quelle

0

Dies ist wahrscheinlich die beste Antwort, wenn man die browserübergreifenden Probleme berücksichtigt.

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
quelle

0

Ich glaube, ich verstehe dein Problem, weil ich ein ähnliches habe. Damit das Tag <label>das Attribut für hat, können Sie dieses Attribut verwenden, um Ihre Eingabe mit type = "file" zu verknüpfen. Wenn Sie dies jedoch nicht mit dieser Bezeichnung aktivieren möchten, weil dies eine Regel Ihres Layouts ist, können Sie dies tun.

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

Erweitern Sie das Snippet

Natürlich werden Sie dies für Ihren eigenen Zweck und Ihr eigenes Layout anpassen, aber das ist der einfachere Weg, den ich kenne, damit es funktioniert !!

Leonardo Lindroth
quelle

-1

Basierend auf Guillaume Bodis Antwort habe ich Folgendes getan:

$('.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();
});

Das heißt, es wird zunächst ausgeblendet und dann für den Auslöser angezeigt und dann sofort wieder ausgeblendet.

Stevo
quelle

Eingabe der jQuery-Triggerdatei

Antworten: