How to List Added Photos in View?

Question

I have the following code in my View that takes the path of the photo, and saves in the bank.

@using (Html.BeginForm("Upload", "PessoaFoto", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        @Html.Hidden("idPessoa", Request.QueryString["idPessoa"])
        <input type="file" name="file" />
        <input type="submit" />

    }

how do I list these photos in the View as I add?

What I want is that as I add the photos in my view they appear so that I can view them..

For example:

Answer 1

There are several ways to do what you want. The simplest is to have an element img in your code, and when selecting the image (in this example I am using the .change()) you add the image.

A basic example would be this:

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      $('#preview').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}

$("#File").change(function() {
  readURL(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
  <input type='file' id="File" />
  <img id="preview" src="#" />
</form>

This question has several ways to do this, including the one I demonstrated above.