@{
    ViewBag.Title = "Advertising";
    Layout = "~/Views/Shared/MangerMaster.cshtml";
}
<link href="~/Css/Adver.css" rel="stylesheet" />
<link href="~/Css/Form.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

<div class="pioner_big">
    <div class="pioner_vi">
        <form action="" method="post" class="form_web">
            <div class="form_action">
                <label>轮播时间间隔</label><input type="text" name="" id="" value="" class="form_text" />
            </div>
            <div class="form_action" style="">
                <label>图片轮播&nbsp;&nbsp;&nbsp;</label>
                <div class="Img_iv">
                    <ul>
                        <li class="Img_list" >
                            <div class="Img_box" >
                                    <a href="#"><i class="iconfont">&#xe801</i></a>
                                   <img src="~/Images/1.jpg.jpg"/>
                            </div>
                        </li>
                        <li class="Img_list" >
                            <div class="Img_Select" >
                                <a href="#" class="Select_a"><i class="iconfont" id="iconAdd">&#xe800</i></a>
                                <input id="file" type="file" style="display:none" onchange=""/>
                            </div>
                        </li>
                        <li id="image-wrap">
                            <ul id="image-wrap">

                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    $("#iconAdd").click(function () {
    $("#file").click();
});
    (function ($) {
    $.imageFileVisible = function (options) {
        // 默认选项
        var defaults = {
            //包裹图片的元素
            wrapSelector: null,
            //<input type=file />元素
            fileSelector: null,
            width: '800',
            height: '300',
            errorMessage: "请选择图片"
        };
        var opts = $.extend(defaults, options);
        $(opts.fileSelector).on("change", function () {
            var file = this.files[0];

            var imgtype = file.name.substring(file.name.lastIndexOf("."));
            if ((imgtype == '.jpg') || (imgtype == '.gif') || (imgtype == '.jpeg') || (imgtype == ".png") || (imgtype == '.bmp')) {
                var reader = new FileReader();
                reader.onload = function () {
                    var img = new Image();
                    img.src = reader.result;
                    $(img).width(opts.width);
                    $(img).height(opts.height);
                    $(opts.wrapSelector).append("<li style='margin-left:50px;'><img src='" + img.src + "'style='width:800px;height:300px;border-radius:15px;' /></li><i class='iconfont' id='iconDel' style='height:30px;width:30px;position:relative;right:215px;top:-332px;cursor:pointer;color:white;text-align:center;float:right;'><a href='#'>&#xe801</a></i>");

                };

                reader.readAsDataURL(file);
            }
            else {
                alert(opts.errorMessage);
            }
        });
    };
})(jQuery);

$(document).ready(function () {
   // 图片显示插件
    $.imageFileVisible({
        wrapSelector: "#image-wrap",
        fileSelector: "#file",
        width: 800,
        height: 300,
    });
});
</script>