ユーザーがウェブサイトにアップロードしたい画像ファイルのプレビューを表示する

Question

ユーザーがウェブサイトにアップロードする画像のプレビューを表示するにはどうすればいいですか？

つまり、ユーザーがシステムからファイルを選択すると、Webページにアップロードするファイルが表示されます。 HTMLとjQueryを使ってどうすればいいですか？

Answer 1

すべてのブラウザで必ずしもそうではありません。あなたがしようと、ユーザーのハードディスク上の要素を表示することができ、このよう

他のブラウザだけで提供（特定のブラウザのセキュリティ設定に気を付けるん） -

この

は、一部のブラウザでは、 <input type='file'>へのパス全体を提供するため、ありますfilename - ここには何も表示されません。

あなたがいつもできることは、jQuery（.ajax、ページが更新されないように）を使用してファイルをアップロードしてから、それをすでにユーザーに表示することです。これらの現代では、ファイルをアップロードすることはそれほど難しいことではありません（特に、アニメーションが動作している間にアニメーションを提供する場合）。

本当にこの機能が必要な場合は、いつでもJava Applet（facebookまたはimageshackと思う）を使用してプレビューを許可することができます。すべてのユーザーが（最近の十分なバージョンの）Javaをインストールして有効にしているわけではありません。

完全なパスを提供するブラウザ（たとえば、企業環境で働いていて、誰もが同じブラウザを使用しているか、正常に機能低下していて、誰が動作するのか）は、<input type='file'>の.val()を使用してファイル名へのパスを取得するだけです。

• Get full path of a file with FileUpload Control
• How to get the file path from HTML input form in Firefox 3
• https://developer.mozilla.org/en/using_files_from_web_applications
• https://bugzilla.mozilla.org/show_bug.cgi?id=143220

Answer 2

<div class="upload-preview"> 
    <img /> 
</div> 
<input class="file" name="logo" type="file"> 



$(document).ready(function(){ 
var preview = $(".upload-preview img"); 

$(".file").change(function(event){ 
    var input = $(event.currentTarget); 
    var file = input[0].files[0]; 
    var reader = new FileReader(); 
    reader.onload = function(e){ 
     image_base64 = e.target.result; 
     preview.attr("src", image_base64); 
    }; 
    reader.readAsDataURL(file); 
    }); 
}); 

： file://前に、ディスプレイ（ imgまたはそうでダンプ）

詳細情報を追加します。 10

あなたはこのフィドルを使用することができます http://jsfiddle.net/Kulgar/57F67/

[プレビューそれがアップロードされる前の画像]（の