Emulieren Sie einen Dateiupload klicken Sie in jQuery

Question

Ich habe einen <img ... /> Tag, an den ich ein Click-Ereignis in jQuery gebunden habe. Wenn Sie darauf klicken, möchte ich den Klick auf eine Schaltfläche beim Hochladen der Datei emulieren, um das Popup-Fenster zum Durchsuchen des Dateisystems zu öffnen. Ich habe diese Dinge in der Klick-Funktion versucht und hatte keinen Erfolg:

... 
$(".hiddenUploadBtn").click(); 
... 

... 
$(".hiddenUploadBtn").select(); 
... 

... 
$(".hiddenUploadBtn").submit(); 
... 

Answer 1

Nur wickeln die das img in einem Label und legen Sie für das Attribut zur Dateieingabe. Funktioniert für jede Art von Inhalt und ist in die Spezifikation integriert. Sie können die Dateieingabe zu diesem Zeitpunkt sogar ausblenden.

<input type="file" id="fileUpload"><br> 
<label for="fileUpload"> 
    <img src="https://www.google.com/images/srpr/logo11w.png" /> 
</label> 

Answer 2

Die Spezifikation sagt, dass es funktionieren soll, und es tut, auf Chrome. Firefox und andere gängige Browser folgen jedoch nicht den Regeln, also sind Sie SOL.

Answer 3

Dies funktioniert für mich

<input name="picture" type="file" onchange="alert(this.value)" class="file" size=20/> 

für diese Verwendung Upload-Button als Bild versuche

<style> 
div.fileinputs {position:relative; display:inline;} 
div.fakefile {position:absolute; top:0px; left:0px; z-index:1;} 
input.file {position:relative; text-align:right; -moz-opacity:0; filter:alpha(opacity: 0); opacity: 0; z-index:2;} 
<style> 

<div class="fileinputs"> 
    <input name="picture" type="file" onchange="alert(this.value)" class="file" size=1/> 
    <div class="fakefile"> 
    <img src="images/browse.gif" align="middle" alt="browse" title="browse"/> 
    </div> 
</div> 

so das Eingabefeld verborgen ist, und wenn u das Bild klicken - der Auswahldialog angezeigt wird, aber emulieren dieser Dialog von js imposible, yep. Sie können aber auch das Plugin/Hack für Browser)

Answer 4

Versuchen Sie dieses mit nur Javascript schreiben: http://code.google.com/p/upload-at-click/

Demo: http://upload-at-click.narod.ru/demo2.html