如何预览，然后张贴多个图像回到mvc

Question

我知道我可以使用下面的元素同时获取多个文件

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

，然后在控制器

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

但是我想单独或一起添加图像，然后在发布之前预览每个图像。我知道有一些很好的解决方案，像下面的添加新图像不会删除以前的图像

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

问题是:

1. 如果我最后一次添加图像在一起，只有这些图像是回邮
2. 如果上次我添加的图像只有那一张图片传回

我的意思是这取决于我在最后一次添加图像?!

我的问题是我如何单独或一起添加图像，然后对图像进行预览，然后将它们发布回来?

如果你能帮我，那就太好了

谢谢

Answer 1

总之:使用多个文件输入

当前jsname:

• 一个多文件输入
• 显示文件
• 再次选择文件
• 只上传最新的文件

所以在文件选择之后，隐藏多个文件输入并添加另一个。

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

如果你想让'browse'出现在之前的选择之后，那么把preview-area放在前面。

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

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

我已经使用jquery隐藏+添加元素，然后你原来的js添加事件监听器