jQueryの - ファイルアップロード - サムネイル

Question

私はこのコードを持っている：

http://jsfiddle.net/J6vzU/1/

私は動的に（つまり、再アップロード後に変更されます）アップロードされたファイルのサムネイルを表示し、最終的には「保存」ボタンを使用して変更を保存します。

timthumbなどの使用方法はわかっていますので、サイズ変更は問題にはなりませんが、jQueryを使用してアップロードされた画像を表示する方法はありますか？

ありがとうございます！

[編集]

ここでは、コードです：

<form method="post" action=""> 
    <input type="file" name="datafile" size="40"> 
    <div> 
     <p>Live AJAX uploaded file thumbnail</p> 
    </div> 
    <input type="submit" value="Save this image"> 
</form> 

Answer 1

[2.5年後の編集：この回答以下のジョシュアのコメントを参照してください、これは（今）が可能であると思われる、あなたが準備されている場合は、古いブラウザのサポートを犠牲にする]

私の知る限り、ブラウザはファイルをサーバにアップロードすることしかできません。したがって、スクリプトはアップロードされる前にファイル自体にアクセスできません。

あなたは、あなたの画像がajax-ishにアップロードされ、サーバーがそれを処理し、（サムネイルされた）画像にjQueryスクリプトに情報（URL）を提供するソリューションを考え出すことができます。

しかし、その場合、「マジック」はサーバー上で起こり、jQueryでは発生せず、ソリューションは使用するサーバー側の言語/技術に依存します。

Answer 2

それはファイルをサポートするブラウザとFileReaderのでは可能である（caniuse.com）

Heres some examples and guides

Answer 3

これを試してみてください。

ステップ1：あなたのファイルに次のコード行を追加する

<form id="myform"> 
    <input type='file' onchange="showImage(this);" /> 
    <img id="imagepreview" src="" alt="your image" /> 
</form> 

ステップ2：同じページに次のスクリプトを追加します

<script type="text/javascript"> 
function showImage(input) { 
     if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function (e) { 
       $('#imagepreview').attr('src', e.target.result); 
     } 
     reader.readAsDataURL(input.files[0]); 
     } 
    } 
</script> 

チェックdemo