画像アップロードボタンdiv

Question

ID「uploadWrapper」のdivをjsFiddleから画像をアップロードできるボタンにするにはどうすればいいですか？基本的には<input type="file">と同じです。前もって感謝します。

EDIT - DUE ANSWERS TO誰かが画像をアップロードするとき、私はこのjsFiddle

を参照して、青色の背景を持つdiv要素の代わりに、画像のプレビューを表示するにはどうすればよい

を受け

Answer 1

これは想像以上に簡単ではないし、セキュリティ上の理由から、信頼できない要素からのファイルアップロードを自動的に引き起こさないブラウザもあります。

Pluploadのようなサードパーティのファイルアップロードプラグインを使用するか、プログレッシブエンハンスメントを使用してカスタムボタンを偽装することをおすすめします（もちろん、最も柔軟なソリューションではありません）ここに：

http://filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/

---

Pluploadイベントあなたは、Ajaxファイルアップロード時に発生する可能性のあるイベントをフックし、アップロード先でものを行うことができますどのような応答データの例に、このページを参照してください、あなたは可能性があります。取得：

http://www.plupload.com/example_events.php

次のような応答データを取得することができます

id=p16in5el9ne2fc1rd08120in081 
name=denim.png 
size=20623 
loaded=20623 
percent=100 
status=DONE 
target_name=p16in5el9ne2fc1rd08120in081.png 

そしてもちろん、あなたは、サーバがアップロードさに完全な絶対URLを取得できるようにするには、成功したアップロードに返すものを変更することができますが画像。

あなたは、このデータを取得したら、あなたはそれをフックと（jQueryを使って）このような何かをやって画像を切り替えることができます

// Called when a file has finished uploading 
FileUploaded: function(up, file, info) { 
    $('#id_of_the_image').attr('src', 'uploads/' + file.target_name); 
} 

Answer 2

Flash、Silverlight、またはActive-Xオブジェクトを使用しない限りできません。ブラウザは、すべてのファイル参照操作をロックダウンします。

<input type="file" />を非表示にしてボタン上に表示することで、ユーザーが「ボタン」をクリックしたときに実際にinputがクリックされるようにすることができます。

UPDATE：あなたの2番目の質問に応えて

、画像をプレビューするには、サーバーに投稿して、サーバー上のイメージのパスにあなたのimg年代srcをポイントする必要があります。

Answer 3

チェックこのフィドル：http://jsfiddle.net/techfoobar/kM9aa/1/

プレビュー：ジャスティンサテュロス言ったように選択したイメージをサーバーにアップロードし、アップロードしたイメージのURLを使用しない限り、HTML/JSを使用してプレビューする方法はありません。