CODEWITHSUNDEEP
jqueryasp.net-mvc
Abbas Foroughi
Abbas Foroughi

Reputation: 63

How to preview and then post multiple image back in mvc?

I know I can use the following element to take multiple files at the same time

<input type="file" multiple id="Image" name="Image" size="40" />

and then in controller 

 [HttpPost]
 public ViewResult Add(List< HttpPostedFileBase> Image = null)
 {
       ...
 }

but I want to add images individually or together then have preview of each images before posting. and I know there is some good solution like the following that adding new image dosen't remove previous images

http://jsfiddle.net/2xES5/28/

The problem is:

  1. If the last time I've added images together only those images are posted back
  2. If the last time I've added an image only that single image is posted back

I mean it depends how I added images at the last time?!

My question is how can I add images individually or together then have preview of the images then post them back?

It would be awesome if help me

Thanks

Upvotes: 2

Views: 3034

Answers (1)

fdomn-m
fdomn-m

Reputation: 28611

In summary: Use multiple multiple file inputs.

Current jsfiddle:

  • one multiple-file-input
  • select files
  • shows files
  • select files again
  • only latest files are uploaded

so after the file select, hide the multiple-file-input and add another one.

<div id='filecontainer'>
    <input type="file" class="dimmy" id="image-input" multiple />
</div>
<div class="preview-area"></div>

if you want the 'browse' to appear after the previous selection, then put preview-area first.

$(inputLocalFont).hide();
inputLocalFont = $('<input type="file" class="dimmy" multiple />')
    .appendTo("#filecontainer")
    .get(0);
inputLocalFont.addEventListener("change", previewImages, false);

http://jsfiddle.net/9vzhbpgt/1/

I've used jquery to hide+add element then your original js to add the event listener.

Upvotes: 3

Related Questions