web-dev-qa-db-de.com

Jquery-Trigger-Dateieingabe

Ich versuche, mit jQuery eine Upload-Box (Browse-Button) auszulösen.
Die Methode, die ich jetzt ausprobiert habe, ist: 

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

Aber es scheint nicht zu funktionieren. Bitte helfen. Vielen Dank.

153
Alec Smart

Dies liegt an einer Sicherheitsbeschränkung.

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

Also habe ich versucht, es außerhalb des Viewports zu positionieren, indem ich position:absolute und top:-100px; eingestellt habe und voilà es funktioniert.

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

nenne es einen Hack.

Hoffe das funktioniert für dich.

187
adardesign

das hat für mich 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 unterstützt: <<<

Die Idee ist, dass Sie eine unsichtbare riesige Schaltfläche "Durchsuchen" über Ihrer benutzerdefinierten Schaltfläche überlagern. 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());
    });
});
97
sled

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>

Dies löst die Eingabedatei aus

49
Jhon Rey

Ich habe es in IE8 + (neuester FF und Chrom) getestet (= getestet):

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

Die Taste fokussiert vor feuert den Klick (ansonsten ignoriert Chrom ihn).

Hinweis: Sie müssen Ihre Eingabe anzeigen und anzeigen (wie in, nicht display:none und nicht visibility:hidden) . Ich empfehle (wie viele andere zuvor), die Eingabe absolut zu positionieren und vom Bildschirm zu werfen.

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

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>

10
Mohan

Mit adardesign wurde das Dateieingabeelement ignoriert, wenn es ausgeblendet wird. Ich habe auch bemerkt, dass viele Leute die Elementgröße auf 0 verschoben haben oder sie mit Positionierungs- und Überlaufanpassungen außerhalb der Grenzen stoßen. Das sind alles tolle Ideen.
Eine Alternative, die auch perfekt zu funktionieren scheint, ist die Deckkraft einfach auf 0 zu setzen. Dann können Sie immer die Position setzen, um zu verhindern, dass andere Elemente versetzt werden, wie dies bei Ausblenden der Fall ist. Es scheint ein wenig unnötig zu sein, ein Element um fast 10 K Pixel in eine beliebige Richtung zu verschieben.

Hier ist ein kleines Beispiel für diejenigen, die es 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);
}
9
eyegropram

Der Neugier halber können Sie etwas tun, indem Sie ein Upload-Formular und eine Eingabedatei dynamisch erstellen, ohne es in den DOM-Baum aufzunehmen:

$('.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 das uploadForm nicht zum DOM hinzufügen.

5
jairhumberto

Korrekter 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>
5
E9 Sistemas

Das ist Absicht und Absicht. Es ist eine Sicherheitsfrage.

4
Chad Grant

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

Bootstrap-Dateieingabetasten Demo

4
Natwar Singh

oder einfach nur

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

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

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

Auf diese Weise kann Ihr Dateieingabefeld die css-Eigenschaft display on none haben und trotzdem den Handel gewinnen :)

3
skywlkr

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

3
Valentin Galea

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

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

See here:Beispielcode hier

Auf diese Weise ist das Eingabefeld für echte Dateien nicht sichtbar, und Sie sehen nur den benutzerdefinierten "Button", bei dem es sich tatsächlich um ein modifiziertes LABEL-Element handelt. Wenn Sie auf dieses LABEL-Element klicken, werden das Fenster zum Auswählen einer Datei und die Datei angezeigt Sie wählen, wird in das Eingabefeld für echte Dateien gehen.

Darüber hinaus können Sie das Aussehen und Verhalten wie gewünscht ändern (z. B .: Holen Sie den Namen der ausgewählten Datei nach der Auswahl aus der Dateieingabedatei und zeigen Sie sie irgendwo. Das LABEL-Element führt dies nicht automatisch aus. Ich lege es normalerweise nur als Textinhalt in das LABEL.

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

3
TheCuBeMan

ich hatte Probleme mit der benutzerdefinierten clientseitigen Validierung für <input type="file"/>, während ich einen falschen Knopf auslöste, 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 die Eingabe von Upload 

#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;
}
2
Amin K

Probieren Sie es aus, 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');
});
1
thinpiglin

Unter iOS 7 war mein Problem etwas anders. FastClick verursachte Probleme. Alles, was ich tun musste, war, class="needsclick" zu meiner Schaltfläche hinzuzufügen.

1
Dex

Dies ist wahrscheinlich die beste Antwort, wenn Sie die Cross-Browser-Probleme berücksichtigen.

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">
0
Eddsters