jquery - 如何在MVC中预览然后发布多个图像？

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

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

然后在控制器中

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

但我想单独添加图像或一起添加图像，然后在发布之前先预览每个图像。而且我知道有一些不错的解决方案，例如以下内容，添加新图像不会删除以前的图像

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

问题是：


如果上次我将图像加在一起，则只有那些图像是
回发
如果上次我仅添加了一张图像
图片回传了


我的意思是这取决于我上次添加图像的方式？！

我的问题是如何分别添加图像或一起添加图像，然后预览图像，然后再发布回去？

如果能帮助我，那太好了

谢谢

最佳答案

总结：使用多个多个文件输入。

当前的jsfiddle：


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


因此，在选择文件后，隐藏多文件输入并添加另一个。

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

如果您希望“浏览”出现在上一个选择之后，则将预览区域放在第一位。

$(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添加事件侦听器。