jQuery画像の動的読み込みによるアップロード

Question

私は1つの画像形式を持っています私は店舗ページの画像をアップロードしたいと思います。クリックするだけで、アップロードボックスを表示してから、画像を選択して新しいアップロードされたアイテムで1つの画像を置き換えるときは、autoSubmitする必要があります。

実際のアップロードボタンがない現在のページレイアウトです。画像クリックで、我々は、ユーザーのPC上のアップロードウィンドウが表示されます：

フォームはAjaxリクエストを使用して、送信するとこれがそうHTMLフィールドで強調表示された領域のためのコード

<div class="uploader"> 
    <form method="POST" id="upload_image"> 
     <img src="/img/upload.png" id="imageUpload" alt="upload" /> 
    </form> 
</div> 

あり、それが返って成功したら、画像名（通常は現在のtime()をファイル名として）をセッション変数として保存する予定です。アップロード処理中にLoading...画像を表示してから、imageUploadを新しい画像に置き換えてください/img/thumbs/NEWIMAGENAMEHERE.png。

質問時間 は、私はロード画像と画像を交換するために使用することができますjQueryの機能とアップロードが完了すると、次にロードされたイメージはありますか？このようなシングルイメージアップロード用のjqueryライブラリは既にありますか？すべての図書館の私は複数のイメージの作業を見つけました。このストアレイアウトで1つのイメージしかサポートしていないため、複数のイメージをアップロードする必要はありません。 @から

おかげで提案へ

Answer 1

おかげで、私はすぐにそれ自身の代わりに、アップロードのイメージを決定しましたaron9forever、私は単純に画像を表示して提出し、フォームにアップロードします。これは、彼らがフォームを提出するときに、問題がある場合、彼らは画像をアップロードし直す必要があるが、$ _POST変数を使ってそれを回避する方法があるという厄介な問題を提起する。このjQueryの

$(function() { 
    function readURL(input) { 
     if(input.files && input.files[0]) { 
      var reader = new FileReader(); 
      reader.onload = function (e) { 
       $('#imagetoUpload').attr('src', e.target.result); 
      } 
      reader.readAsDataURL(input.files[0]); 
     } 
    }; 
    $("#productImage").change(function(){ 
     readURL(this); 
    }); 
    $("#imagetoUpload").click(function() { 
     $("input[id='productImage']").click(); 
    }); 
});