asp.net mvc之图片上传，webuploader多实例上传疑问，在这里轻松解决！

前言

最近在做MVC项目，在处理图片上传功能上遇到了一道坎。之前是使用webuploader插件实现图片上传，但在处理多实例问题时，一直难以跨过。几经思索，再次踏上了学习之路。

疑难问题

1.在之前使用webuploader时,在处理多图上传问题上，疑惑众多。
2.其在处理多实例问题上，也存在问题，虽说功能强大，但后期维护过于繁琐，给项目进度照常影响。

解决方案

对于以上问题，我们将换种方式去处理，基本思路是使用input 的file文件属性来实现图片上传的功能。这次功能实现采用两个实例（即在一个页面有多个独立的图片上传按钮及图片展示区），并却实现多图上传。

上传图片并显示

1.实现布局
在表单中实现基础布局，设置相应属性，代码如下：

<tr class="uploader_row">
            <td>主题图片</td>
            <td colspan="7" class="img">
                <div id="file_list1">
                    <img id="default_img" />
                </div>
            </td>
            <td class="img" valign="middle" colspan="2">
                <div>
                    <div id="uploader" class="webuploader">
                        <div class="upload_btns">

                            <!-- 只接受jpg，gif和png格式 -->
                            <input id="upload_input" type="file" accept="image/gif, image/jpg, image/png,image/jpeg,image/bmp" multiple onchange="showImg(this,@Id, 0)" />
                            <span id="upload">选择并上传文件</span>
                            <span class="upload_input_rmk">支持多图上传</span>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <tr class="uploader_row">
            <td>详情图片</td>
            <td colspan="7" class="img">
                <div id="file_list2">
                    <img id="default_img" />
                </div>
            </td>
            <td class="img" valign="middle" colspan="2">
                <div>
                    <div id="uploader" class="webuploader">
                        <div class="upload_btns">

                            <!-- 只接受jpg，gif和png格式 -->
                            <input id="upload_input" type="file" accept="image/gif, image/jpg, image/png,image/jpeg,image/bmp" multiple onchange="showImg(this,@Id, 1)" />
                            <span id="upload">选择并上传文件</span>
                            <span class="upload_input_rmk">支持多图上传</span>
                        </div>
                    </div>
                </div>
            </td>
        </tr>

【内容解析】
1.实现图片上传使用input file文件类型。
2.设置可上传图片格式，使用accept属性：image/gif, image/jpg, image/png,image/jpeg,image/bmp。
3.设置多图上传属性multiple。

2.图片浏览上传及显示
在上一步中，已经布局好图片上传，现在实现上传及显示。读取图片文件并显示，这里使用两种方式实现，如下：
1）使用window.URL.createObjectURL(file)读取file实例并显示图片

//显示图片
function showImg(obj, id, type) {
    var files = obj.files;
    //使用window.URL.createObjectURL(file)读取file实例并显示图片
    document.getElementById("imgContainer").innerHTML = getImgsByUrl(files);
}

// 使用window.URL.createObjectURL(file)读取file实例并显示图片
function getImgsByUrl(files) {
    var elements = '&#