アップロードした直後にmvcのウェブサイトで画像を表示する方法は？

Question

私は、コントローラを介してHtml.BeginForm（）を使用してイメージをアップロードしています。アップロードされた画像は正しく保存されます（フォルダに表示されます）が、ウェブサイトでは表示されません。そうするためには、私はウェブブラウザ全体をリロードする必要があります。
アップロード後に自分のウェブサイトに画像を表示するにはどうすればよいですか？ウェブサイトはこの画像を数回、異なる視点で、常に<img scr="imagePatch"/>で示しています。新しい画像は、以前のものと同じ名前で保存され、置き換えられます。

Answer 1

これを行うには多くの方法があります。 フォーム内にhtmlファイルapiを使用できます。

$(document).ready(function(){ 
    // render the image in our view 
    function renderImage(input,file) { 

     // generate a new FileReader object 
     var reader = new FileReader(); 

     // inject an image with the src url 
     reader.onload = function(event) { 
     the_url = event.target.result; 
     $('.img-preview__').remove(); 
     $(input).after("<img class='img-preview__' src='" + the_url + "' />") 
     } 

     // when the file is read it triggers the onload event above. 
     reader.readAsDataURL(file); 
    } 

    // handle input changes ... you can change selector 
    $("#the-file-input").change(function(event) { 
     // grab the first image in the FileList object and pass it to the function 
     renderImage(event.target,this.files[0]); 
    }); 
}); 

これはうまくいくでしょう。イメージプレビューをよりよく見せることができます。画像プレビュー要素の は例

<h2>Create</h2> 
@using (Html.BeginForm("Create", "Image", null, FormMethod.Post, 
           new { enctype = "multipart/form-data" })) { 

    <fieldset> 
     <legend>Image</legend> 
     <div class="editor-label"> 
      @Html.LabelFor(model => model.ImagePath) 
     </div> 
     <div class="editor-field"> 
      <input id="the-file-input" title="Upload a product image" 
            type="file" name="file" /> 
     </div> 
     <p><input type="submit" value="Create" /></p> 
    </fieldset> 
} 

ために、このCSSコード

img.img-preview__ { 
    width: 120px; 
    border: 3px solid #ddd; 
    border-radius: 3px; 
    display: inline-block; 
} 

を使用する私は、サーバー上のアップロードは、HTTPを参照してくださいする前にも、画像をプレビューすることができますjQueryのを使用して