C# MVC（File）控件多张图片上传加预览

刚来公司实习，老板叫我写一个积分商城网站。用的是公司的框架结构搭建的后台，所以后台的图片上传不需要自己写。但是前台的评价图片就需要自己手写了，在网上找了很多代码发现都用不了。问了很多人也都没有实现！

最后公司同事给我了一个上传的代码，拿来借用。发现效果很好，困扰了我很多天的问题，也得于解决。现在我把他分享出来！

先看一下上传效果：

界面样式：（显示效果）

C# MVC（File）控件多张图片上传加预览

预览效果：（唯一的缺点就是上传的好像不是高清图片，是经过压缩的。目的是为了节省空间）

C# MVC（File）控件多张图片上传加预览

成功上传会有一个状态显示：

C# MVC（File）控件多张图片上传加预览

这样就已经完成图片上传啦！也保存在了本地！

接下来就看一下代码是如何实现的吧！

前端代码：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Script/jquery-1.8.2.min.js"></script>
    <link href="~/CSS/webuploader.css" rel="stylesheet" />
    <script src="~/Script/webuploader.js"></script>
    <link href="~/CSS/bootstrap.min.css" rel="stylesheet" />
    <link href="~/CSS/style.css" rel="stylesheet" />
    <link href="~/CSS/demo.css" rel="stylesheet" />
    <link href="~/CSS/font-awesome.css" rel="stylesheet" />

</head>
<body>
    <table class="tc_table_cp" border="0">
        <tr>
            <td width="104">图片上传：</td>
            <td colspan="3">
                <div id="fileList">
                    
                </div>
                <div class="cp_img_jia" id="filePicker"></div>
            </td>
        </tr>
        <tr>
            <td width="104"></td>
            <td colspan="3">
                 <button id="ctlBtn" class="btn btn-default">开始上传</button>
            </td>
        </tr>
    </table>


</body>
</html>

前端代码