zoukankan      html  css  js  c++  java
  • 一个自定义栏的编辑代码:(------- 更改 上传图片为自定义背景图片 -------)

    这是在后台控制器里面的相关代码:

         [SupportFilter]
            public ActionResult UserBanner()
            {
                return View(CurrentUser);
            }
    
            [HttpPost]
            [SupportFilter]
            public ActionResult UserBanner(UserInfo model)
            {
                //using (bll)
                //{
                //    CurrentUser.FSpaceName = model.FSpaceName;
                //    CurrentUser.FBannerBg = model.FBannerBg;
                //    if (bll.Edit(CurrentUser))
                //    {
                        
                //        ViewBag.ReturnResult = "True";
                //        return View(CurrentUser);
                //    }
                //    else
                //    {
                //        return View(model);
                //    }
                //}
    
    
                using (bll)
                {
                   // string user_img = CurrentUser.FUserImgBig;
                   // string user_simg = CurrentUser.FUserImgSmall;
                   // string smallimg = getsmallimgname(model.FUserImgBig);
                    string bannerbg = CurrentUser.FBannerBg;
                    string spacename = model.FSpaceName;
                   // CurrentUser.FUserImgBig = model.FUserImgBig;
                   // CurrentUser.FUserImgSmall = smallimg;
                    CurrentUser.FBannerBg = model.FBannerBg;
                    CurrentUser.FSpaceName = model.FSpaceName;
                    //if (bll.Edit(CurrentUser))
                    //{
                    //    if (user_img != null && System.IO.File.Exists(Server.MapPath(user_img)) && user_img != model.FUserImgBig)
                    //    {
                    //        System.IO.File.Delete(Server.MapPath(user_img));
                    //    }
                    //    if (user_simg != null && System.IO.File.Exists(Server.MapPath(user_simg)) && user_simg != smallimg)
                    //    {
                    //        System.IO.File.Delete(Server.MapPath(user_simg));
                    //    }
                    //    ViewBag.ReturnResult = "True";
                    //    return View(CurrentUser);
                    //}
                    //else
                    //{
                    //    return View(model);
                    //}
                    if (bll.Edit(CurrentUser))
                    {
                            //bannerbg:背景图片对象  ; spacename:空间名称文字 ;CurrentUser :当前用户
    if (bannerbg != null && System.IO.File.Exists(Server.MapPath(bannerbg)) && bannerbg != model.FBannerBg) { System.IO.File.Delete(Server.MapPath(bannerbg)); } if (spacename != null && System.IO.File.Exists(Server.MapPath(spacename)) && spacename != model.FSpaceName) { // bll.Create(model); System.IO.File.Delete(Server.MapPath(spacename)); //System.IO.File.Create(Server.MapPath(spacename)); } ViewBag.ReturnResult = "True"; return View(CurrentUser); } else { return View(model); } } }

    前台相关代码:

              
     <form action="" method="post" name = "form1" id ="form1">
                @Html.HiddenFor(m => Model.FId)
    
                <input type="hidden" id="hid_menuitem" value="menuspace_album" />
                <div class= "bgc" style="height: 900px; margin-top: 10px;text-align:center">
                    <div style="float:left;  800px; text-align: center;">
                        <div style="height: 50px;">
                           </div>
    
                            <div style="height: 50px;">
                                <table  style=" 60%;margin:auto">
                                    <tr class="imgbg"><!---      --->
                                        <td>
                                          <b>  编辑空间名称:</b>
                                        </td>
                                        <td>
                                            @*<input type="text" name="SpaceName" value="" id="SpaceName" style="font-family: Verdana,Arial; font-size: 10pt;"
                                                class="wd2" />*@
                                         @Html.TextBoxFor(m => Model.FSpaceName, new { @class = "input_bg"})
                                        </td>
                                    </tr>
                                    <tr><td>  &nbsp;&nbsp;&nbsp;&nbsp;   </td><td>  &nbsp;&nbsp;&nbsp;&nbsp;   </td></tr>
                                    <tr class="imgbg_top">
                                        <td>
                                           <b> 编辑上传背景图片:</b>
                                        </td>
                                        <td>
                                            @Html.Hidden("txtWorksImage5")    <!--   FBannerBg     FUserImgBig  -->
                                            @Html.HiddenFor(m => Model.FBannerBg, new { @class = "input_bg", ReadOnly = "readonly", @id = "FUserImgBig" })
                                            <input type="button" style=" 54px; height: 24px; border: 0px; background-image: url(/images/index/img_37.gif);"
                                                id="btnUpfile5" />&nbsp;&nbsp;&nbsp;
                                            @Html.ValidationMessageFor(m => m.FBannerBg, "", new { @id = "uploading5" })
                                            <span> 支持jpg、gif、png或bmp格式</span>
                                        </td>
                                    </tr>
                                     <tr><td>  &nbsp;&nbsp;&nbsp;&nbsp;   </td><td>  &nbsp;&nbsp;&nbsp;&nbsp;   </td></tr>
                                    <tr>
                                    <td> <b>背景预览效果:</b>  </td>
                                    <td>
                                      <img id="img_scan" width="250" height="50" style="border: 0" alt="请选择合适可背景图片,最佳为:980*400像素" src="/images/index/select88.jpg"/>      <!--添加后的预览图片框-->
                                    </td>
                                    </tr>
                                    <tr><td>  &nbsp;&nbsp;&nbsp;&nbsp;   </td><td>  &nbsp;&nbsp;&nbsp;&nbsp;   </td></tr>
                                   <tr>
                                       <td> 
                                       <input name="Submit" type="submit" class="btn_style" value="保存" style="height: 24px" />
                                           <span id="saveMsg" style="color: Green; margin-left: 10px"></span>
                                       </td>
                                       <td>
                                          
                                       </td>
                                   </tr>
    
                                </table>
                            
                            
                            </div>
    
    
    @*                    <div style="height: 100px;">
                            @{
                if (File.Exists(Server.MapPath(Model.FUserImgSmall)))
                {
                                <img src="@Model.FUserImgSmall" width="100" height="100" style=" border:1px solid gray;" />
                }
                else
                {
                                <img src="/images/uploadimg_default.jpg" width="100" height="100" style="border: 1px solid gray;" />
                }
                            }
                        </div>*@
                        <div style="height: 350px;">
                        </div>
                    </div>
                    @* <div style="float:left; 1px; height:500px; margin-left:10px; margin-right:10px">
                        <img src="/images/menu_line.gif" alt="" height="500px" width="1px"/>
                    </div>*@
                 @*   <div style="float: left;  300px;">
                        <div style="height: 20px;">
                            设置新头像</div>
                        <div>
                            1、使用真实照片,展示真我风采<br />
                            2、支持jpg、gif、png或bmp格式
                        </div>
                        <div style="margin-top: 10px;">
                            @Html.Hidden("txtWorksImage5")
                            @Html.HiddenFor(m => Model.FUserImgBig, new { @class = "input_bg", ReadOnly = "readonly" })
                            <input type="button" style=" 54px; height: 24px; border: 0px; background-image: url(/images/index/img_36.gif);"
                                id="btnUpfile5" />
                            @Html.ValidationMessageFor(m => m.FUserImgBig, "", new { @id = "uploading5" })
                        </div>
                        <div style="margin-top: 10px; vertical-align: middle;">
                            <img id="img_scan" width="100" height="100" style="border: 0" />
                        </div>
                        <div style="margin-top: 15px;">
                        </div>
                        <div style="vertical-align: middle;">
                            <input name="Submit" type="submit" class="btn_style" value="保存" style="height: 24px" />
                            <span id="saveMsg" style="color: Green; margin-left: 10px"></span>
                        </div>
                    </div>*@
                </div>
        </form>


    与之相关代码:

    var vAlertMsg = '文件格式不正确,请选择 jpg|jpeg|gif|png|zip 格式的文件!';
    
    function createUploader(obj) {
        var upload1 = new AjaxUpload('#btnUpfile' + obj, {
            action: '/Handler/userimg_upload.ashx',
            responseType: 'json',
            autoSubmit: true,
            onSubmit: function (file, ext) {
                if (obj == 1 || obj == 2) {
                    if (!(ext && /^(jpg|jpeg|gif|png|bmp)$/ig.test(ext))) {
                        alert("文件格式不正确,请选择 jpg|jpeg|gif|png 格式的文件!", '系统提示');
                        return false;
                    }
                }
                else if (obj == 5) {
                    if (!(ext && /^(jpg|jpeg|gif|png)$/ig.test(ext))) {
                        alert("文件格式不正确,请选择 jpg|jpeg|gif|png 格式的文件!", '系统提示');
                        return false;
                    }
                }
                else if (obj == 4) {
                    if (!(ext && /^(pdf)$/ig.test(ext))) {
                        alert("文件格式不正确,请选择 pdf 格式的文件!", '系统提示');
                        return false;
                    }
                    $("#tr_SetUp").show();
                }
                else {
                    if (!(ext && /^(jpg|jpeg|gif|png|zip)$/ig.test(ext))) {
                        alert(vAlertMsg, '系统提示');
                        return false;
                    }
                }
                $('#uploading' + obj).html('<img src="http://images.cnblogs.com/index/ajax-loader.gif" />文件上传中,请稍后!');
            },
            onComplete: function (file, json) {
                //var data = eval("(" + json + ")");
                //alert(json['FilePath']);
                var err = json['Msg'];
                var file1;
    
                if (err != null && err != '') {
                    $('#uploading' + obj).html('<span>*</span>上传失败');
                }
                else {
                    file1 = json['FilePath'];
                    //alert(file1);
                    $('input[id$="txtWorksImage' + obj + '"]').val(file1);
                    //$('input[id$="_WorksImage' + obj + '"]').val(file1).attr('disabled', 'true');
                    $('#uploading' + obj).html('<span>*</span>上传成功');
                    if (obj == 1) {
                        $('input[id$="FImageSrc"]').val(file1);
                    }
                    else if (obj == 2) {
                        $('input[id$="FIcon"]').val(file1);
                    }
                    else if (obj == 3) {
                        $('input[id$="GBigPic"]').val(file1);
                    }
                    else if (obj == 4) {
                        $('input[id$="S_FPath"]').val(file1);
                    }
                    else if (obj == 5) {
                        $('input[id="FUserImgBig"]').val(file1);
                        $('#img_scan').attr("src",file1);
                    }
    
                }
            }
        });
    }

    与之相关的模板页相关代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>@ViewBag.Title</title>
        @Scripts.Render("~/Farm/jquery")
        @Scripts.Render("~/Farm/jqueryval")
        @Styles.Render("~/newcss/Zone")
        @Styles.Render("~/css/page")
        @Styles.Render("~/PersonalSpace/Style")
        @Scripts.Render("~/PersonalSpace/jqueryui")
        @Styles.Render("~/css/jqueryui")
    </head>
    <body>
        <!--引用头部 -->
        @RenderPage("../parts/Head.cshtml")
        @using (UserInfoBLL bll = new UserInfoBLL())
        {
            string userId = LoginBLL.GetCurrentUserFid();
            UserInfo userInfo = bll.Fetch(userId);
            var bgUrl = userInfo.FBannerBg;
            var bgName = userInfo.FSpaceName;
    
            if (bgName == null)
            {
                bgName = userInfo.FName + "的空间";
            }
            else
            {
     
    //在非默认状态下,更改空间名称(实现自定义空间名称)
    bgName
    = userInfo.FSpaceName; } if (bgUrl == null) {
    //默认状态下的空间背景图片
    bgUrl
    = "url(/images/personalSpace/980personBanner.jpg)"; } else {
    //动态更改背景图片
    bgUrl
    = "url(" + bgUrl + ")"; //bgUrl ="url(" + (string.IsNullOrEmpty(Model.FBannerBg) ? ImageConfig.ErrorImagePath : Model.FBannerBg) + ")"; //WTH 修改! //bgUrl = "@(string.IsNullOrEmpty(Model.FBannerBg) ? ImageConfig.ErrorImagePath : Model.FBannerBg)"; //WTH 修改! } <script type="text/javascript"> $(function () { $("#personalBg").css("background-image", '@bgUrl'); $("#userSpaceName").html('@bgName'); }); </script> <div class="two_bg"> <!--中间内容区域 --> <div id="personal_content"> <div class="personal_ad" id="personalBg"> <span id="userSpaceName" style="margin-left: 10px; font-size: 22px; color: White; margin-top: 50px; float: left;"></span> <div id="weather"> <span class="weather_font" id="weather_one_d" style="color:#FFFFFF">00-00℃</span> <span id="weather_one_txt" style="color:#FFFFFF"> 加载中...</span><img id="weather_one_img" src="" style=" 35px; margin-left: 10px" /> <br /> <img width="27" height="15" src="/images/today_icon.png" /> <span class="weather_bottom_font" style="color:#FFFFFF"><span id="weatherDate">2013年1月1号</span>&nbsp;&nbsp;<span id="weatherWeek">星期一</span></span> </div> </div> <div class="clear"> </div> <!--引用菜单 --> @RenderPage("../parts/Menu.cshtml") <div> <div> @RenderBody() </div> </div> </div> <!--引用尾部 --> @RenderPage("../parts/Foot.cshtml") </div> } <script type="text/javascript"> $(function () { //加载完成后,更新天气 //请求天气数据 101200101是武汉市的天气代码 $.getJSON('/Home/Home/ReturnJsonWeather/101200101', null, function (data) { var d = data.weatherinfo; if (d != null) { $('#weatherDate').text(d['date_y']); //日期 $('#weatherWeek').text(d['week']); //星期 //今日天气 $('#weather_one_img').attr('src', '/images/WeatherPng/' + d['img1'] + '.png'); //天气图片 $('#weather_one_txt').text(d['weather1']); //天气信息 $('#weather_one_d').text(d['temp1']); //温度 } }); }); </script> </body> </html>

      值得参考的js文件书写格式方法:

    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>@ViewBag.Title</title>
        @Scripts.Render("~/Farm/jquery")
        @Scripts.Render("~/Farm/jqueryval")
        @Styles.Render("~/newcss/Zone")
        @Styles.Render("~/css/page")
        @Styles.Render("~/PersonalSpace/Style")
        @Scripts.Render("~/PersonalSpace/jqueryui")
        @Styles.Render("~/css/jqueryui")
    </head>
    <body>
        <!--引用头部 -->
        @RenderPage("../parts/Head.cshtml")
        @using (UserInfoBLL bll = new UserInfoBLL())
        {
            string userId = LoginBLL.GetCurrentUserFid();
            UserInfo userInfo = bll.Fetch(userId);
            var bgUrl = userInfo.FBannerBg;
            var bgName = userInfo.FSpaceName;
    
            if (bgName == null)
            {
                bgName = userInfo.FName + "的空间";
            }
            else
            {
                bgName = userInfo.FSpaceName;
            }
    
            if (bgUrl == null)
            {
                bgUrl = "url(/images/personalSpace/980personBanner.jpg)";
            }
            else
            {
                bgUrl = "url(" + bgUrl + ")";
                //bgUrl ="url(" + (string.IsNullOrEmpty(Model.FBannerBg) ? ImageConfig.ErrorImagePath : Model.FBannerBg) + ")";  //WTH 修改!
                //bgUrl =  "@(string.IsNullOrEmpty(Model.FBannerBg) ? ImageConfig.ErrorImagePath : Model.FBannerBg)";  //WTH 修改!
            }
            <script type="text/javascript">
                $(function () {
                    $("#personalBg").css("background-image", '@bgUrl');
                    $("#userSpaceName").html('@bgName');
                });
                    
            </script>
            <div class="two_bg">
                <!--中间内容区域 -->
                <div id="personal_content">
                    <div class="personal_ad" id="personalBg">
                        <span id="userSpaceName" style="margin-left: 10px; font-size: 22px; color: White;
                            margin-top: 50px; float: left;"></span>
                        <div id="weather">
                            <span class="weather_font" id="weather_one_d" style="color:#FFFFFF">00-00℃</span> <span id="weather_one_txt" style="color:#FFFFFF">
                                加载中...</span><img id="weather_one_img" src="" style=" 35px; margin-left: 10px" />
                            <br />
                            <img width="27" height="15" src="/images/today_icon.png" />
                            <span class="weather_bottom_font" style="color:#FFFFFF"><span id="weatherDate">2013年1月1号</span>&nbsp;&nbsp;<span
                                id="weatherWeek">星期一</span></span>
                        </div>
                    </div>
                    <div class="clear">
                    </div>
                    <!--引用菜单 -->
                    @RenderPage("../parts/Menu.cshtml")
                    <div>
                        <div>
                            @RenderBody()
                        </div>
                    </div>
                </div>
                <!--引用尾部 -->
                @RenderPage("../parts/Foot.cshtml")
            </div>
        }
        <script type="text/javascript">
            $(function () {
                //加载完成后,更新天气
                //请求天气数据 101200101是武汉市的天气代码
                $.getJSON('/Home/Home/ReturnJsonWeather/101200101', null, function (data) {
                    var d = data.weatherinfo;
                    if (d != null) {
                        $('#weatherDate').text(d['date_y']); //日期
                        $('#weatherWeek').text(d['week']); //星期
                        //今日天气
                        $('#weather_one_img').attr('src', '/images/WeatherPng/' + d['img1'] + '.png'); //天气图片
                        $('#weather_one_txt').text(d['weather1']); //天气信息
                        $('#weather_one_d').text(d['temp1']); //温度
                    }
                });
            });
        </script>
    </body>
    </html>
    有些梦想是遥不可及的,除非你坚持!
  • 相关阅读:
    [LeetCode] 303. 区域和检索
    [LeetCode] 120. 三角形最小路径和 ☆☆☆(动态规划 范例)
    [LeetCode] 18. 四数之和 ☆☆☆(双指针)
    [LeetCode] 16. 最接近的三数之和 ☆☆☆(双指针)
    [LeetCode] 109. 有序链表转换二叉搜索树 ☆☆☆(递归)
    优惠券模块设计要点
    nginx upstream 实现负载均衡
    nginx fastcgi配置
    nginx rewrite规则
    nginx Location 配置
  • 原文地址:https://www.cnblogs.com/softmans/p/3213822.html
Copyright © 2011-2022 走看看