jQueryのファイルアップロードのエミュレート

Question

jQueryでclickイベントをバインドした<img ... />タグがあります。それがクリックされると、ファイルシステムのブラウズポップアップを開くためにファイルアップロードのボタンのクリックをエミュレートしたいと思います。私は、クリック機能の中にこれらの事を試してみましたが、何の成功を持っていたしました：

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

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

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

Answer 1

： http://code.google.com/p/upload-at-click/

デモ： しかし、あなたはまた、ブラウザのハック/プラグインを作成することができます）

Answer 2

は仕様は、動作するようになっていると言い、それがChromeで、ありません。しかし、Firefoxや他の一般的なブラウザはルールに従わないので、あなたはSOLです。

Answer 3

これは私のために使用アップロードボタンの

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

画像がこの

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

を試みるように入力フィールドが隠されている、およびuは画像をクリックしたときに動作します - 選択ダイアログが表示されますが、エミュレートしますjs imposibleからのこのダイアログ、うん。ただ、ラベルにIMGをラップし、属性に設定 http://upload-at-click.narod.ru/demo2.html

Answer 4

だけではJavaScriptを使用して、このいずれかを試してみてくださいファイル入力に転送します。あらゆる種類のコンテンツに対応し、仕様に組み込まれています。その時点でファイル入力を非表示にすることもできます。

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