图片右上角添加和删除,图片右上角添加删除怎么弄

摘要：

一、css/*图片适用大小*/img{width:100%;height:100%;}.imgAllli{/*图片容器position:relative属性*/width:100px;height:100px;border:solid1px#ccc;margin:8px5px;float:left;position:relative;box-shadow:0010px#eee;}.delImg{p

一、css

    /*图片适用大小*/
    img {
        width:100%;
        height:100%;
    }
    .imgAll li { /*图片容器position: relative属性*/
        width:100px;
        height:100px;
        border:solid 1px #ccc;
        margin:8px 5px;
        float:left;
        position:relative;
        box-shadow:0 0 10px #eee;
    }
    .delImg {
        position:absolute;
        top:-10px;
        right:-7px;
        width:22px;
        height:22px;
        background:#000;
        border-radius:50%;
        display:block;
        text-align:center;
        line-height:22px;
        color:#fff;
        font-weight:700;
        font-style:normal;
        cursor:pointer;
        /*Rotate div */
        transform:rotate(45deg);
        -ms-transform:rotate(45deg); /*Internet Explorer */
        -moz-transform:rotate(45deg); /*Firefox */
        -webkit-transform:rotate(45deg); /*Safari 和 Chrome */
        -o-transform:rotate(45deg); /*Opera */
    }

二、html

                        <ul class="imgAll">
                            <li>
                                <img class="cover-img"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNTEwYmJhZjQzYSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1MTBiYmFmNDNhIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA1NDY4NzUiIHk9Ijc0LjUiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="alt="..."class="radius">
                                <span class="delImg">+</span>
                            </li>
                            <li>
                                <img class="cover-img"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNTEwYmJhZjQzYSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1MTBiYmFmNDNhIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA1NDY4NzUiIHk9Ijc0LjUiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="alt="..."class="radius">
                                <span class="delImg">+</span>
                            </li>
                            <li>
                                <img class="cover-img"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNTEwYmJhZjQzYSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1MTBiYmFmNDNhIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA1NDY4NzUiIHk9Ijc0LjUiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="alt="..."class="radius">
                                <span class="delImg">+</span>
                            </li>
                            <li>
                                <img class="cover-img"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNTEwYmJhZjQzYSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1MTBiYmFmNDNhIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA1NDY4NzUiIHk9Ijc0LjUiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="alt="..."class="radius">
                                <span class="delImg">+</span>
                            </li>
                            <li>
                                <img class="cover-img"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNTEwYmJhZjQzYSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1MTBiYmFmNDNhIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA1NDY4NzUiIHk9Ijc0LjUiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="alt="..."class="radius">
                                <span class="delImg">+</span>
                            </li>
                            <li>
                                <img class="cover-img"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNTEwYmJhZjQzYSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1MTBiYmFmNDNhIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjA1NDY4NzUiIHk9Ijc0LjUiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="alt="..."class="radius">
                                <span class="delImg">+</span>
                            </li>
                        </ul>

图片右上角添加删除第1张

@using Webdiyer.WebControls.Mvc;
@model Webdiyer.WebControls.Mvc.PagedList<MyDB.Capital>
@{
    ViewBag.Title = "海外地产";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>
    /*房源图片上传进度条*/
    .progress {
        position:absolute;
        top:35%;
        left:0;
        box-sizing:border-box;
        padding:1px;
        width:100%;
        border:none;
        border-radius:3px;
        background-color:rgba(164, 159, 159, .5);
    }
    .bar {
        width:0;
        height:20px;
        border-radius:3px;
        background-color:#03a9f4;
        -webkit-transition:width .6s ease;
        -o-transition:width .6s ease;
        transition:width .6s ease;
    }
    .percent {
        position:absolute;
        top:3px;
        left:33%;
        display:inline-block;
        color:#fff;
    }
    .progressBg {
        position:absolute;
        top:0;
        left:0;
        z-index:5;
        display:none;
        width:100%;
        height:100%;
    }
    .sp_b {
        position:absolute;
        width:1rem;
        height:1rem;
        background:url('../../Images/delete.png') center no-repeat;
        background-size:cover;
    }
    /*图片适用大小*/
    img {
        width:100%;
        height:100%;
    }
    .imgAll li { /*图片容器position: relative属性*/
        width:100px;
        height:100px;
        border:solid 1px #ccc;
        margin:8px 5px;
        float:left;
        position:relative;
        box-shadow:0 0 10px #eee;
    }
    .delImg {
        position:absolute;
        top:-10px;
        right:-7px;
        width:22px;
        height:22px;
        background:#000;
        border-radius:50%;
        display:block;
        text-align:center;
        line-height:22px;
        color:#fff;
        font-weight:700;
        font-style:normal;
        cursor:pointer;
        /*Rotate div */
        transform:rotate(45deg);
        -ms-transform:rotate(45deg); /*Internet Explorer */
        -moz-transform:rotate(45deg); /*Firefox */
        -webkit-transform:rotate(45deg); /*Safari 和 Chrome */
        -o-transform:rotate(45deg); /*Opera */
    }
</style>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 海外地产 <span class="c-gray en">&gt;</span> @ViewBag.Title <a class="btn btn-success radius r"style="line-height:1.6em;margin-top:3px"href="javascript:Refresh();"title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
    <div class="text-c">
        <form id="searchForm"action="@Url.Content("~/Capital/CapitalList")" method="get">
            <input type="text"name="keyword"id="keyword"placeholder=" 地产名称"style="250px"class="input-text">
            <button name=""id="searchBtn"class="btn btn-success"type="submit"><i class="Hui-iconfont">&#xe665;</i> 搜索</button>
        </form>
    </div>
    <div id="addSection"class="cl pd-5 bg-1 bk-gray mt-20">
        <span class="l">
            @*<a href="javascript:;"onclick="datadel()"class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a>*@
            @Html.Link("AddCapital", "Capital", "<i class="Hui-iconfont">&#xe600;</i>添加海外地产", new { @  }, "javascript:void(0);")
        </span>
    </div>
    <div class="mt-20"id="MVCpager">
        @Html.Partial("_OverseasLandList", Model)
    </div>
</div>
<!--地产Start-->
<div class="wap-container"id="app">
    <div class="container ui-sortable">
        <div class="page-container"id="addPanel"style="display:none;">
            <div class="form form-horizontal responsive"novalidate="novalidate">
                <div class="row cl">
                    <form id="form1">
                        <label class="form-label col-xs-3">房源图片：</label>
                        <div class="formControls col-xs-6">
                            <span class="btn-upload form-group">
                                <input class="input-text upload-url"type="text"name="uploadfile-2"id="uploadfile-2"readonly style="200px">
                                <a href="javascript:void();"class="btn btn-primary upload-btn"><i class="Hui-iconfont">&#xe642;</i> 浏览文件</a>
                                <input type="file"id="upfile"multiple name="file-2"class="input-file">
                            </span>
                        </div>
                        <div class="formControls col-xs-2"style="margin-top:1.5%;">
                            @* 上传图片进度条 *@
                            <div class="progressBg">
                                <div class="progress">
                                    <div class="bar"></div>
                                    <div class="percent"style="font-size:14px">0%</div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-3"></label>
                    <div class="formControls col-xs-8">
                        <ul class="imgAll">
                            <template v-for="(item,index) in ImageList">
                                <li>
                                    <img class="cover-img"v-bind:src="item"alt="..."class="radius">
                                    <span class="delImg"v-on:click="DeleteImg(item)">+</span>
                                </li>
                            </template>
                            <span v-for="(item,index) in ImageList">
                                <img class="thumb"v-bind:src="item"><b class="sp_b"v-on:click="DeleteImg(item)"></b>
                            </span>
                        </ul>
                    </div>
                </div>
                <div class="row clearfix">
                    <label class="form-label col-xs-3">所在区域：</label>
                    <div class="formControls col-xs-8">
                        <span class="select-box">
                            <select class="select"v-model="selectedArea">
                                <option disabled value="">请选择</option>
                                <template v-for='(Area,index) in AreaList'>
                                    <option v-bind:value="Area.value"> {{ Area.text }}</option>
                                </template>
                            </select>
                        </span>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-3">房源标题：</label>
                    <div class="formControls col-xs-8">
                        <input type="text"class="input-text"placeholder="请输入房源标题"name="website"id="website">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-3">房源地址：</label>
                    <div class="formControls col-xs-8">
                        <input type="text"class="input-text"placeholder="请输入房源地址"name="website"id="website">
                    </div>
                </div>
                <div class="row clearfix">
                    <label class="form-label col-xs-3">房源类型：</label>
                    <div class="formControls col-xs-8">
                        <span class="select-box">
                            <select class="select"v-model="selectedHouseType"size="1"name="city">
                                <option disabled value="">请选择</option>
                                <template v-for='(HouseType,index) in HouseTypeList'>
                                    <option v-bind:value="HouseType.value"> {{ HouseType.text }}</option>
                                </template>
                            </select>
                        </span>
                    </div>
                </div>
                <div class="row clearfix">
                    <label class="form-label col-xs-3">物业类别：</label>
                    <div class="formControls col-xs-8">
                        <span class="select-box">
                            <select class="select"v-model="selectedPropertyClass"size="1"name="city">
                                <option disabled value="">请选择</option>
                                <template v-for='(PropertyClass,index) in PropertyClassList'>
                                    <option v-bind:value="PropertyClass.value"> {{ PropertyClass.text }}</option>
                                </template>
                            </select>
                        </span>
                    </div>
                </div>
                <div class="row clearfix">
                    <label class="form-label col-xs-3">装修状况：</label>
                    <div class="formControls col-xs-8">
                        <span class="select-box">
                            <select class="select"v-model="selectedDecoration"size="1"name="city">
                                <option disabled value="">请选择</option>
                                <template v-for='(Decoration,index) in DecorationList'>
                                    <option v-bind:value="Decoration.value"> {{ Decoration.text }}</option>
                                </template>
                            </select>
                        </span>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-3">均价：</label>
                    <div class="formControls col-xs-8">
                        <input type="text"class="input-text"placeholder="请输入均价"name="website"id="website">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-3">
                        房源介绍：
                    </label>
                    <div class="formControls col-xs-8">
                        <textarea cols=""rows=""class="textarea"name="beizhu"id="beizhu"placeholder="房源介绍"></textarea>
                    </div>
                </div>
                <div class="row clearfix">
                    <label class="form-label col-xs-3">房源特色：</label>
                    <div class="formControls col-xs-8">
                        <span class="select-box">
                            <select class="select"v-model="selectedFeature"size="1"name="city">
                                <option disabled value="">请选择</option>
                                <template v-for='(Feature,index) in FeatureList'>
                                    <option v-bind:value="Feature.value"> {{ Feature.text }}</option>
                                </template>
                            </select>
                        </span>
                    </div>
                </div>
                @*<my-list v-bind:list="HouseTypeList"
                    type-name="房源类型"
                    v-bind:isshowtype="IsShowHouseType"
                    v-on:closetype="CloseHouseType"
                    v-on:selectedtypename="SelectItemHouseType"></my-list>*@
                <div class="row cl">
                    <label class="form-label col-xs-3">面积(平米)：</label>
                    <div class="formControls col-xs-8">
                        <input type="text"class="input-text"autocomplete="off"placeholder="请输入面积"name="password2"id="password2">
                    </div>
                </div>
                <div class="row clearfix">
                    <label class="form-label col-xs-3">户型：</label>
                    <div class="formControls col-xs-8">
                        <span class="select-box">
                            <select class="select"v-model="selectedRoomType"size="1"name="city">
                                <option disabled value="">请选择</option>
                                <template v-for='(RoomType,index) in RoomTypeList'>
                                    <option v-bind:value="RoomType.value"> {{ RoomType.text }}</option>
                                </template>
                            </select>
                        </span>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-3">房型图片：</label>
                    <div class="formControls col-xs-8">
                        <span class="btn-upload form-group">
                            <input class="input-text upload-url"type="text"name="uploadfile-2"id="uploadfile-2"readonly style="200px">
                            <a href="javascript:void();"class="btn btn-primary upload-btn"><i class="Hui-iconfont">&#xe642;</i> 浏览文件</a>
                            <input type="file"multiple name="file-2"class="input-file">
                        </span>
                    </div>
                </div>
                <div class="row cl">
                    <div class="col-xs-7 col-xs-offset-3">
                        <input type="hidden"name="OrderNum" />
                        <input class="btn btn-primary radius btn_ok"type="submit"value="提交">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--添加资方End-->
@section Scripts{
    @{
        Html.RegisterMvcPagerScriptResource();
    }
    <script type="text/javascript"src="/HUI/lib/My97DatePicker/4.8/WdatePicker.js"></script>
    <script type="text/javascript"src="/HUI/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script type="text/javascript"src="/HUI/lib/jquery.validation/1.14.0/validate-methods.js"></script>
    <script type="text/javascript"src="/HUI/lib/jquery.validation/1.14.0/messages_zh.js"></script>
    <script type="text/javascript"src="@Url.Content("~/Scripts/vue.js")"></script>
    <script type="text/javascript">
        $(function() {
            $(".popadd").click(function() {
                layer.open({
                    type: 1,
                    area: ['60%', '80%'],
                    fix: false, //不固定
maxmin: false,
                    shade: 0.4,
                    title: "添加资方",
                    content: $("#addPanel")
                });
            });
            //
            //上传房源图片
$(document).on("change", "#upfile", function() {
                //if (!picVility(document.getElementById("upfile").value)) {
                //alert("只能上传GIF,JPG,JPEG,BMP   文件,请重新选择！");
                //return;
                //}
                varrFilter = /^(image/jpeg|image/png|image/gif|image/bmp|image/jpg)$/i;
                varmsg = "*.gif,*.jpg,*.jpeg,*.png,*.bmp";
                if(this.files.length <= 0) {
                    alert("请选择图片");
                    return;
                }
                varoFile;
                for(vari = 0; i < this.files.length; i++) {
                    oFile = this.files[i];
                    if(!rFilter.test(oFile.type)) {
                        alert("第" +(i + 1) + "张图片格式错误~请选择格式为" +msg + "的图片~");
                        return;
                    } else if(oFile.size > 10485760) {
                        alert("最大只能上传10M的图片，第" +(i + 1) + "张图片大于10M");
                        return;
                    }
                }
                if(vm.ImageList.length + this.files.length > 16) {
                    alert("最多只能上传16张房源图片！");
                    return;
                }
                $("#form1").ajaxSubmit({
                    url: "/OverseasLand/Upload",
                    type: "Post",
                    beforeSend: function() {
                        $(".bar").width("0%");
                        $(".percent").html("0%");
                        $(".progressBg").show();
                        $(".dye_word,.dye_img").hide();
                        //console.log("上传图片前，初始化...");

                    },
                    uploadProgress: function(event, position, total, percentComplete) {
                        varpercentVal =percentComplete + '%';
                        $(".bar").width(percentVal)
                        $(".percent").html(percentVal);
                        //console.log(percentVal, position, total);
},
                    success: function(data) {
                        $(".progressBg").hide();
                        $(".dye_word,.dye_img").show();
                        $(".bar").width("0%")
                        $(".percent").html("0%");
                        if(data.IsSuccess) {
                            //vm.ImageList.push(data.Text);
                            varimgList =JSON.parse(data.Text);
                            $.each(imgList, function(index, item) {
                                vm.ImageList.push(item);
                            });
                        }
                        else{
                            ShowMsg("系统繁忙，请稍后再试！");
                        }
                    }
                });
            });
            //$("#addForm").validate({
            //rules: {
            //Name: {
            //required: true,
            //minlength: 2,
            //maxlength: 30
            //},
            //Mobile: {
            //required: true,
            //isMobile: true
            //},
            //ExpiryDate: {
            //required: true,
            //minlength: 10
            //},
            //},
            //messages: {
            //Name: { required: "必填", minlength: "不能小于2个字符" },
            //Mobile: { required: "必填", email: "手机格式不正确" },
            //ExpiryDate: { required: "必填", minlength: "不能小于10个字符" },
            //},
            //onkeyup: false,
            ////focusCleanup: true,
            //success: "valid",
            //submitHandler: function (form) {
            ////$("#addForm").ajaxSubmit()
            //$("#addForm").ajaxSubmit({
            //type: 'post',
            ////url: "xxxxxxx",
            //success: function (data) {
            //if (data.IsSuccess) {
            //layer.msg('添加成功！', { icon: 1, time: 1000 }, function () {
            //location.reload();
            //});
            //}
            //else {
            //layer.msg(data.Message, { icon: 0, time: 1000 });
            //}
            //},
            //error: function (XmlHttpRequest, textStatus, errorThrown) {
            //layer.msg('发生错误，操作失败!', { icon: 1, time: 2000 });
            //}
            //});
            ////var index = parent.layer.getFrameIndex(window.name);
            ////parent.$('.btn-refresh').click();
            ////parent.layer.close(index);
            //}
            //});
});
        varvm = newVue({
            el: '#app',
            data: {
                ImageList: [],//图片列表
AreaList: [], //区域类型
HouseTypeList: [],//房源类型
PropertyClassList: [],//物业类别
DecorationList: [],//装修
FeatureList: [],//房源特色
RoomTypeList: [],//添加主力户型-房型
selectedArea: "",//选择区域类型
selectedHouseType: "",//选择房源类型
selectedPropertyClass: "",//选择物业类别
selectedDecoration: "",//选择装修
selectedFeature: "",//选择房源特色
selectedRoomType: "",//选择主力户型-房型
},
            methods: {
                //函数
initLoad: function() {
                    varself = this;
                    $.getJSON("/OverseasLand/InitAddData", { houseCategory: 1}, function(result) {
                        console.log("result:" +result);
                        if(result.IsSuccess) {
                            //1、区域类型
                            if(result.ResultData.AreaList != null) {
                                array =[];
                                result.ResultData.AreaList.map(function(item, index) {
                                    self.$set(item, "Selected", false);
                                    array.push({
                                        value: item.AreaID,
                                        text: item.AreaName,
                                        checked: item.Selected
                                    });
                                });
                                self.AreaList =array;
                            }
                            //2、房源类型
                            if(result.ResultData.HouseTypeList != null) {
                                vararray =[];
                                result.ResultData.HouseTypeList.map(function(item, index) {
                                    self.$set(item, "Selected", false);
                                    array.push({
                                        value: item.TypeID,
                                        text: item.TypeName,
                                        Selected: item.Selected
                                    });
                                });
                                self.HouseTypeList =array;
                            }
                            //3、物业类别
                            if(result.ResultData.PropertyClassList != null) {
                                array =[];
                                result.ResultData.PropertyClassList.map(function(item, index) {
                                    self.$set(item, "Selected", false);
                                    array.push({
                                        value: item.ID,
                                        text: item.Name,
                                        Selected: item.Selected
                                    });
                                });
                                self.PropertyClassList =array;
                            }
                            //4、装修
                            if(result.ResultData.DecorationList != null) {
                                array =[];
                                result.ResultData.DecorationList.map(function(item, index) {
                                    self.$set(item, "Selected", false);
                                    array.push({
                                        value: item.ID,
                                        text: item.Name,
                                        Selected: item.Selected
                                    });
                                });
                                self.DecorationList =array;
                            }
                            //5、房源特色
                            if(result.ResultData.FeatureList != null) {
                                array =[];
                                result.ResultData.FeatureList.map(function(item, index) {
                                    self.$set(item, "Selected", false);
                                    array.push({
                                        value: item.FeatureID,
                                        text: item.FeatureName,
                                        Selected: item.Selected
                                    });
                                });
                                self.FeatureList =array;
                            }
                            //6、添加主力户型-房型
                            if(result.ResultData.RoomTypeList != null) {
                                array =[];
                                result.ResultData.RoomTypeList.map(function(item, index) {
                                    self.$set(item, "Selected", false);
                                    array.push({
                                        value: item.ID,
                                        text: item.Name,
                                        Selected: item.Selected
                                    });
                                });
                                self.RoomTypeList =array;
                            }
                        }
                    });
                }, DeleteImg: function(data) {
                    console.log("this.ImageList-1:" + this.ImageList);
                    this.ImageList.splice(this.ImageList.indexOf(data), 1);
                    console.log("this.ImageList-2:" + this.ImageList);
                },
            }, created() {
                //Vue 初始化的默认载入事件
                this.initLoad();
                //this.options.push({ value: "用户3", text: "新选项3", checked: false });
},
        });
    </script>
}

图片右上角添加删除

相关文章

Linux下iptables 禁止端口和开放端口

c语言进阶6-指针

SQL Server获取连续区间的日期

doc命令操作数据库（下）

ECSHOP模糊分词搜索和商品列表关键字飘红功能

精通 Oracle+Python 事务和大型对象

最新文章

随机推荐

思享工具箱导航

JSON工具

格式化转换

加解密编码

文本数字

网络

站长

计算

其他

对照列表