如何在上传后立即在mvc网站上查看图像？ [英] how to view image on mvc website instantly after uploading?

问题描述

我使用Html.BeginForm（）通过控制器上传图像的网站。上传的图像保存正确（我在文件夹中看到它）但我无法在网站上看到它。要做到这一点，我必须重新加载整个网页浏览器。

如何在上传后在我的网站上显示图像？网站几次在不同视图中显示此图片，始终以< img scr =imagePatch/> 显示。新图像只保存与前一个图像相同的名称，替换它。

解决方案

有很多方法可以做到这一点
您可以在表单中使用html文件api。

  $（document）.ready（function（）{
 //在我们的视图中渲染图像
函数renderImage（input，file）{
 
 //生成一个新的FileReader对象
 var reader = new FileReader（）; 
 
 //使用src url注入图片
 reader.onload = function（event）{
 the_url = event.target.result; 
 $（'。img-预览__'）。remove（）; 
 $（input）.after（< img class ='img-preview__'src ='+ the_url +'/>）
} 
 
 //当读取文件时它会触发上面的onload事件。
 reader.readAsDataURL（file）; 
} 
 
 //处理输入变化...你可以改变选择器
 $（＃the-file-input）。change（function（event）{ 
 //抓取FileList对象中的第一个图像并将其传递给函数
 renderImage（event.target，this.files [0]）; 
}）; 
}）; 
  

这会很好。要么你可以让你的图像预览看起来更好。
图片预览元素使用此CSS代码

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

例如

 < H2>创建和LT; / H2> 
 @using（Html.BeginForm（Create，Image，null，FormMethod.Post，
 new {enctype =multipart / form-data}））{
 
< fieldset> 
<图片>图片< /图例> 
< div class =editor-label> 
 @ Html.LabelFor（model => model.ImagePath）
< / div> 
< div class =editor-field> 
< input id =the-file-inputtitle =上传产品图片
 type =filename =file/> 
< / div> 
< p>< input type =submitvalue =创建/>< / p> 
< / fieldset> 
} 
  

我希望这可以帮助

I have website with form I'am uploading image from using Html.BeginForm() through the controller. Uploaded image saves correctly (i see it in folder) but I can't see it on website. To do so I have to reload entire webbrowser.
How can I make image showing on my website after uploading? Website shows this image few times, on different views, always by <img scr="imagePatch"/>. New image just saves itself with the same name as previous one, replacing it.

解决方案

there are many ways to do this you can use html file api inside your form.

   $(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]);
    }); 
});

this will work nice . either you can make your image preview look like better. for image preview element use this css code

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

for example

<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>
}

I hope this help

这篇关于如何在上传后立即在mvc网站上查看图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！