现在的位置: 首页 > 综合 > 正文

jquery实现客户端快速查询，本地图片预览功能

2013年09月17日 ⁄ 综合 ⁄ 共 11719字 ⁄ 字号 小 中 大 ⁄ 评论关闭

    原OA系统“通讯录”。这是经理提出的要重新设计的一个功能。要求查询用户列表要快、添加用户信息一次完成并实现图片预览。

据我分析，这个功能的难点有：生成静态页、利用浏览器脚本技术实现查询、本地图片预览。估计了两周能够完成，但到最后一周感觉到时间紧迫，所以每天下班后又增加4~5个小时来写代码。主要用到动态生成页面代码实现“生成静态页”，jquery对html元素的强大操作功能实现快速查询，以及div的背景图片滤镜功能实现“本地图片预览”，最终按时完成。效果不错。

代码如下：

1. 上传文件方法

public static string UpLoadFile(FileUpload fileUpload, string urlPath, string extName)
        {

            FileUpload fp = new FileUpload();

            if (null == fileUpload.PostedFile)
            {
                return null;
            }

            string fileName = Path.GetFileName(fileUpload.PostedFile.FileName);
            if (string.Empty == fileName)
            {
                return string.Empty;
            }
            string fileExtension = Path.GetExtension(fileName);

            //
            //根据类型确定文件格式如果格式都不符合则返回
            //
            if (-1 == extName.IndexOf(fileExtension))
            {
                throw new ApplicationException("上传文件的数据格式不合法");
            }

           
            Random objRand = new Random();
            System.DateTime date = DateTime.Now;
            //生成随机文件名
            string saveName = date.Year.ToString() + date.Month.ToString() + date.Day.ToString() + date.Hour.ToString() + date.Minute.ToString()

                + date.Second.ToString() + Convert.ToString(objRand.Next(99) * 97 + 100);
            fileName = saveName + fileExtension;
           

            string phyPath = HttpContext.Current.Request.MapPath(urlPath);

            //
            //保存文件
            //
            try
            {
                fileUpload.PostedFile.SaveAs(phyPath + fileName);

                return urlPath +fileName;
            }
            catch
            {
                throw new ApplicationException("上传失败!");
            }

        }

2.生成静态也面方法：

        public static bool CreateUserListHtmlPage()
        {
            bool success = false;
     
            StringBuilder tempHtml = new StringBuilder();
            tempHtml.AppendLine("<!DOCTYPE html PUBLIC /"-//W3C//DTD XHTML 1.0 Transitional//EN/" /"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd/">");
            tempHtml.AppendLine("<html xmlns=/"http://www.w3.org/1999/xhtml/">");
            tempHtml.AppendLine("<head><meta http-equiv=/"Content-Type/" content=/"text/html;charset=utf-8/" /><title>通讯录</title>");
            tempHtml.AppendLine("<script src=/"js/jquery126.js/" type=/"text/javascript/"></script><script src=/"js/user_list.js/" type=/"text/javascript/"></script>");
            tempHtml.AppendLine("<link href=/"style/com.css/" rel=/"stylesheet/" type=/"text/css/" /><link href=/"style/user_list.css/" rel=/"stylesheet/" type=/"text/css/" />");
            tempHtml.AppendLine("</head><body>");
            tempHtml.AppendLine("<div style=/"width: 980px/"><div style=/"width: 100%/">");
            tempHtml.AppendLine("<div class=/"left fleft/"><div class=/"w100 line_s1 left_block/" style=/" height:41px;background:url(imgs/left_bg.gif)/">&nbsp;&nbsp;搜索<input id=/"search/" style=/"width: 80px;/" /><img id=/"btn_search/" src=/"imgs/search.gif/" alt=/"点击搜索/" /></div><div id=/"type_list/" class=/"w100 left_block/"><div class=/"w100/" style=/"height:28px;vertical-align:baseline; text-align:left;background:url(imgs/left_bg2.gif);/"><div style=/"width:14px;height:28px;float:left; background:url(imgs/left_type.gif)/"></div><div style=/"float:left; line-height:28px;/"><b>东方红海</b></div></div><div class=/"w100 line_s1/">&nbsp;&nbsp;<a id=/"search0/" href=/"#/">所有成员</a></div>");
            StreamWriter sw = null;
            try
            {
                Dictionary<string, string> links = new Userinfo().GetallLinkData();
                foreach (KeyValuePair<string, string> link in links)
                {
                    tempHtml.AppendLine("<div class=/"w100 line_s1/">&nbsp;&nbsp;&nbsp;&nbsp;<a id=/"" + link.Key + "/" href=/"#/">" + link.Value + "</a></div>");

                }

                tempHtml.AppendLine("<div class=/"w100 line_s1/">&nbsp;&nbsp;&nbsp;&nbsp;<a id=/"try_date/" href=/"#/">试用期员工</a></div></div></div>");
                tempHtml.AppendLine("<div class=/"right fright/">");
                tempHtml.AppendLine("<div class=/"w100 cont_tit/">员工列表信息</div><div class=/"w100 line_s1/" style=/" font-size:14px;/"><div class=/"fleft/" style=/"width: 30px; /"></div><div class=/"fleft/" style=/"width: 100px;/"><b>姓名</b></div><div class=/"fleft/" style=/"width: 100px;/"><b>部门</b></div><div class=/"fleft/" style=/"width: 150px;/"><b>职务</b></div><div class=/"fleft/" style=/"width: 50px;/"><b>性别</b></div><div class=/"fleft/" style=/"width: 80px;/"><b>办公电话</b></div><div class=/"fleft/" style=/"width: 50px;/"><b>状态</b></div><div class=/"fleft/" style=/"width: 140px;/"><b>手机</b></div></div>");
               

                List<MemberList> memList = new Userinfo().GetallMemberList();
                foreach (MemberList mem in memList)
                {
                    if ("离职" == mem.State)
                    {
                        tempHtml.AppendLine("<div class=/"w100 line_s1 data_line/" style=/"background:#ddd;/">");
                    }
                    else
                    {
                        tempHtml.AppendLine("<div class=/"w100 line_s1 data_line/">");
                    }
                    tempHtml.AppendLine("<div class=/"fleft/" style=/"width: 30px;margin-top:6px;/"><input type=/"checkbox/" class=/"checks/" value=/"" + mem.UserID + "/" /></div>");
                    tempHtml.AppendLine("<div class=/"fleft/" style=/"width:100px;border-right:1px dotted #ddd;/">" + mem.UserName + "</div>");
                    tempHtml.AppendLine("<div class=/"fleft/" style=/"width:100px;border-right:1px dotted #ddd;/">" + mem.Department + "</div>");
                    tempHtml.AppendLine("<div class=/"fleft/" style=/"width:150px;border-right:1px dotted #ddd;/">" + mem.Position + "</div>");
                    tempHtml.AppendLine("<div class=/"fleft/" style=/"width:50px;border-right:1px dotted #ddd;/">" + mem.Sex + "</div>");
                    tempHtml.AppendLine("<div class=/"fleft/" style=/"width:70px;border-right:1px dotted #ddd;/">" + mem.OfficeTel + "</div>");
                    tempHtml.AppendLine("<div class=/"fleft/" style=/"width:50px;border-right:1px dotted #ddd;/">" + mem.State + "</div>");
                    tempHtml.AppendLine("<div class=/"fleft/" style=/"width:150px;border-right:1px dotted #ddd;/">" + mem.Mobile + "</div>");
                    tempHtml.AppendLine("<div class=/"fleft/" style=/"width:80px;margin-top:8px;/"><img class=/"detial/" src=/"imgs/detial.gif/" alt=/"查看详细内容/"/></div>");
                    tempHtml.AppendLine("<div class=/"fleft/" style=/"display:none/">" + mem.Groups + "</div>");
                    tempHtml.AppendLine("</div>");

                }

                tempHtml.AppendLine("</div><hr class=/"w100 line_hr/" /></div></div></body></html>");

                //写字符串到user_list.htm文件
                sw = new StreamWriter(HttpContext.Current.Request.MapPath("") + "//user_list.htm", false, Encoding.UTF8);
                sw.Write(tempHtml.ToString());
                sw.Flush();
                success = true;
                return success;
            }
            catch (Exception ex)
            {
                throw ex;
            }
            finally
            {
                sw.Close();
            }

        }

 

3.图片上传，以及本地预览的代码：

html:

    <div class="fleft w50">
                <div>
                    <div style="vertical-align:top;">照片：</div>
                    <div id="user_photo" runat="server"></div>
                    <asp:HiddenField ID="Hphoto_url" runat="server" />
                    <div>
                       
                        <asp:FileUpload ID="UpPhoto" runat="server" BackColor="#E2F5FA"
                             ForeColor="#885200" CssClass="control" Width="230px"/>
                    </div>
                </div>
            </div>

 

css:

    #user_photo
{
 
    width:100px;
    height:120px;
    background:url(../imgs/temp_user.gif);
    cursor:pointer;
    border:solid 1px #aaa;
 }
.pre_img
{
 cursor:pointer;
  width:350px;
  height:330px;
 z-index:99999;
 position:absolute;
 display:none;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
 }

jquery:

    //图片本地显示
    $('#UpPhoto').change(function() {
        $('#user_photo').css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)')
        var newPreview = document.getElementById('user_photo');
        newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(this).val();

    });
    //图片本地预览
    $('#user_photo').click(function() {
        if ($('#UpPhoto').val() != '') {
            var temp = document.createElement('div');
            document.body.appendChild(temp);
            temp.id = 'preimg';
            temp.className = 'pre_img';
            var tempdiv = $('#preimg');
            var offset = $(this).offset();
            tempdiv.css('top', offset.top + "px");
            tempdiv.css('left', offset.left + "px");

            document.getElementById('preimg').filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $('#UpPhoto').val();
            tempdiv.show();

            $('#preimg').click(function() {
                $(this).hide();

            });
        }

    });

    jQuery(function($) {
    $('.checks').hide();
    //搜索
    $('#btn_search').click(function() {

        var stext = $.trim($('#search').val());
        if (stext == '') {
            showCount($('.data_line').length);
            $('.data_line').show();
            return;
        }
        var datas = $('.data_line:contains("' + stext + '")');
        $('.data_line').hide();
        datas.each(function() {
            $(this).show();
        });
        showCount(datas.length);
    });

    //试用期员工

    //分类查询实现
    $('#type_list a').click(function() {

        var group = $(this).attr('id');
        if (group == 'search0') {
            showCount($('.data_line').length);
            $('.data_line').show();
            return;
        }
        if (group == 'try_date') {
            var datas_try = $('.data_line>div:contains("试用")');
            $('.data_line').hide();
            datas_try.each(function() {
                $(this).parent().show();
            });
            showCount(datas_try.length);
            return;
        }

        var datas = $('.data_line>div:last-child:contains(",' + group + ',")');

        $('.data_line').hide();
        datas.each(function() {
            $(this).parent().show();
        });
        showCount(datas.length);

    });
    //详细信息事件，跳转到管理页
    $('.detial').click(function() {
        var id = $(this).parent().parent().find('input');

        window.open('MemAdmin.aspx?uid=' + id.attr('value'), '_blank');
    });

    //    //当分类输入框获得焦点时，显示分类选项
    //    $('#type_name').focus(function() {
    //        $('.checks').show();
    //    });

    //    //确定添加分组
    //    $('#sub_type').click(function() {
    //        //必须填写分组名称和选择至少一个员工
    //        var trueCheck = $('.checks[checked]');
    //        var group = '';
    //        trueCheck.each(function() {

    //            group = group + $(this).val() + ',';
    //        });

    //        if (group == '') {
    //            alert('请选择员工！');
    //            return;
    //        }
    //        var tname = $.trim($('#type_name').val());
    //        if (tname == '') {
    //            alert('请填写分组名称！');
    //            return;
    //        }
    //        $.get('TypeHandler.ashx?group=' + group + '&name=' + encodeURIComponent(tname), function(data) {
    //            if (data == '0') {
    //                alert('操作失败！');
    //                return;
    //            }
    //            //改变页面的分组结构，添加分组名；新加分组id添加到隐藏域
    //            $('#type_list').append('<div class="w100 line_s1">&nbsp;&nbsp;&nbsp;&nbsp;<a id="' + data + '" href="#">' + tname + '</a></div>');

    //            var last = '';
    //            trueCheck.each(function() {
    //            last = $(this).parent().parent().children('div:last');
    //           
    //                last.append( ',' + data);
    //               
    //            });

    //        });
    //    });

    //    //取消添加分组
    //    $('#cal_type').click(function() {

    //        $('.checks').hide();
    //        $('#type_name').val('');

    //    });

    $('#search').keydown(function(event) {

        if (event.keyCode == 13) {
            $('#btn_search').click();
        }
    });
});

function showCount(count) {
   
    $('.cont_tit span').remove();
   
    $('.cont_tit').append('<span style="color:red;font-size:12px;float:right">合计：' +count+'人</span>');
}

 

 

 

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞