jQuery页面弹出框实现文件上传


Posted in Javascript onFebruary 09, 2017

如图所示,点击新增,弹出如图的弹出框,点击取消不保存页面信息,点击确定保存页面信息

jQuery页面弹出框实现文件上传

在前台页面添加一个标签,任何都可以

<div class="btn btn-default" id="divadd">新增</div>

写弹出框页面

<div id="popup_overlay" style="display: none; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: #8FB0D1; -moz-opacity: 0.8; opacity: 0.8; z-index: 1001; filter: alpha(opacity=40); background: rgb(0, 0, 0); opacity: 0.5;"></div>
  <div id="popup_container" style="display: none; position: fixed; z-index: 99999; padding: 0px; margin: 0px; min-width: 600px; max-width: 600px; top: 50px; left: 454.5px;">
   <br />
   <h1 id="popup_title" style="font-size: 20px;">信息</h1>
   <div id="popup_content" class="confirm" style="margin-top: 0px;">
    <div id="popup_message">
     <div style="width: 500px;">
      <hr style="margin: 10px 0;" />
      <div id="divswitchinfo" style="margin-bottom: 8px;"></div>
      <div style="height: 300px; width: 450px;" id="diviframe">

       <div id="divContract">
        <div id="pContract">
         合同名称:<font color="red">*</font><input type="text" value="" id="txtContractName" style="width: 360px"><br />
         起始时间:<font color="red">*</font><input type="text" value="" id="txtCStartTime" style="width: 150px" onfocus="WdatePicker({ el: 'txtCStartTime' })">-
         <input type="text" value="" id="txtCEndTime" onfocus="WdatePicker({ el: 'txtCEndTime' })" style="width: 150px"><br />
         合同附件:
         <asp:FileUpload ID="fileID" runat="server" />
        </div>
       </div>
       <input type="button" id="btnAdd" value='新增' />
       <input type="hidden" id="hidValue" runat="server" />
       <div id="UDFBlock">
        <p id="udf_template">
               人数<font color="red">*</font>:
    <input type="text" value="" tag="txtNum01" style="width: 90px"><X≤
    <input type="text" value="" tag="txtNum02" style="width: 84px">
         比例:<input type="text" value="" tag="txtPercent" style="width: 86px">%
    <a class="UDF_Delete" style="cursor: pointer">删除</a>
        </p>
       </div>
      </div>
     </div>
    </div>
    <div id="popup_panel" style="clear: both">
     <input type="button" class="btn btn-default" value=" 确定 " id="popup_ok2" />
     <input type="button" class="btn btn-default" value=" 取消 " id="popup_cancel2" />
    </div>
   </div>
  </div>

通过jQuery控制显示或隐藏

$(function () {
 //显示DIV
   $("#divadd").click(function () {
    var hid = $("#hidValue").val();
    if (hid == "") {
     alert("请先提交信息再新增");
     return;
    } else {
     $("#popup_container").show();
     $("#popup_overlay").show();
    }
   });

   //弹窗取消按钮
   $("#popup_cancel2").click(function () {
    $("#popup_container").hide();
    $("#popup_overlay").hide();
   });

   $("#popup_ok2").click(function () {
    $("#popup_container").hide();
    $("#popup_overlay").hide();
    var keys = $("[tag='txtNum01']"),
      values = $("[tag='txtNum02']"),
      precent = $("[tag='txtPercent']"),
      len = keys.length,
     result = [],
      txt = "";
    for (var i = 0; i < len; i++) {
     txt += keys.eq(i).val() + "," + values.eq(i).val() + "," + precent.eq(i).val() + ";";
    }
    var contractName = $("#txtContractName").val();
    var hid = $("#hidValue").val();
    var startTime = $("#txtCStartTime").val();
    var endTime = $("#txtCEndTime").val();
    // var pic = $("#HiddenField2").val();
    var fileUpload = $("#fileID").get(0);
    var files = fileUpload.files;
    //IE8以及以上浏览器
    var data = new FormData();
    for (var i = 0; i < files.length; i++) {
     data.append(files[i].name, files[i]);
    }
    data.append("txt", txt);
    data.append("contractName", contractName);
    data.append("hid", hid);
    data.append("startTime", startTime);
    data.append("endTime", endTime);

    $.ajax({
     //url: "AgentEditSP.aspx/GetData",
     url: "../Handler/FileAll.ashx",
     type: "Post",
     //data: "{'txt':'" + txt + "','contractName':'" + contractName + "','hid':'" + hid + "','startTime':'" + startTime + "','endTime':'" + endTime + "','pic':'" + pic + "'}",
     data:data,
     contentType: false,
     processData: false,
     success: function (data) {
      alert("操作成功");
      location.href = location.href;
     },
     error: function (err) {
      alert(err);
     }
    });
   });
  });

这个是点击新增添加新的代理的代码

<script type="text/javascript">
  $(function () {
   $("#btnAdd").click(HandleUDFProperty);
   function HandleUDFProperty() {
    if ($("[tag='txtNum01']").size() < 7) {
     $("#udf_template").clone().find(":text").val("").end().find("a").click(function () { $(this).parents('p').remove(); }).end().appendTo($("#UDFBlock"));
    }
   }

  });
 </script>

这个是一般处理程序

public void ProcessRequest(HttpContext context)
  {
   var txt = context.Request["txt"];
   var contractName = context.Request["contractName"];
   var hid = context.Request["hid"];
   var startTime = context.Request["startTime"];
   var endTime = context.Request["endTime"];
   var pic = "";

   if (context.Request.Files.Count>0)
   {

    var filenames = "";
    HttpFileCollection files = context.Request.Files;

    for (int i = 0; i < files.Count; i++)
    {
     HttpPostedFile file = files[i];
     filenames =file.FileName;
     pic = filenames;
     string fname = context.Server.MapPath("~/Content/Exploitation/" + file.FileName);
     file.SaveAs(fname);
    }
   }
    // 向ContractDetailSP表插入数据
    if (!string.IsNullOrEmpty(txt) && !string.IsNullOrEmpty(contractName) && !string.IsNullOrEmpty(startTime) && !string.IsNullOrEmpty(endTime))
    {
     if (IsExistAgentName(hid) == 0)//判断代理是否存在
     {
      Model.ContractDetailSP condSP = new Model.ContractDetailSP();
      condSP.ZID = int.Parse(hid);
      condSP.Name = GetAgentName(hid);

      condSP.ParentId = -1;

      var insertTableName = DB.Context.Insert<Model.ContractDetailSP>(condSP);
     }

     if (IsExistContractID(IsExistAgentName(hid), contractName) == 0)//判断合同是否存在
     {
      Model.ContractDetailSP condSP = new Model.ContractDetailSP();
      condSP.Name = contractName;
      condSP.StartTime = DateTime.Parse(startTime);
      condSP.EndTime = DateTime.Parse(endTime);
      condSP.ParentId = IsExistAgentName(hid);
      condSP.ContractPic = pic;
      var insertTableName = DB.Context.Insert<Model.ContractDetailSP>(condSP);
     }
     string[] strrList = txt.Split(';');
     foreach (var item in strrList)
     {
      string[] templist = item.Split(',');
      if (templist.Length > 1)
      {
       Model.ContractDetailSP condSP = new Model.ContractDetailSP();
       condSP.Num1 = int.Parse(templist[0].ToString());
       condSP.Num2 = int.Parse(templist[1].ToString());
       condSP.PercentNum = decimal.Parse(templist[2].ToString());
       condSP.ParentId = IsExistContractID(IsExistAgentName(hid), contractName);
       var insertTableNum = DB.Context.Insert<Model.ContractDetailSP>(condSP);
      }
     }
     context.Response.ContentType = "text/plain";
     context.Response.Write("ok");
    }
    else
    {
     //return "请填写完必填项";
     context.Response.Write("notall");
    }


  }

  public bool IsReusable
  {
   get
   {
    return false;
   }
  }

  private static int IsExistAgentName(string agendID)
  {//select id from ContractDetailSP where AgentID=2123 
   int str = 0;
   var isexist = DB.Context.From<Model.ContractDetailSP>()
    .Select(a => a.Id)
    .Where(a => a.ZID == int.Parse(agendID)).ToList();
   if (isexist.Count < 1)
   {
    str = 0;
   }
   else
   {
    foreach (var item in isexist)
    {
     str = item.Id;
    }
   }
   return str;
  }
  private static int IsExistContractID(int id, string contractName)
  {//select id from ContractDetailSP where ParentId='' and Name=''
   int str = 0;
   var isexist = DB.Context.From<Model.ContractDetailSP>()
    .Select(a => a.Id)
    .Where(a => a.ParentId == id && a.Name == contractName).ToList();
   if (isexist.Count < 1)
   {
    str = 0;
   }
   else
   {
    foreach (var item in isexist)
    {
     str = item.Id;
    }
   }
   return str;
  }
  private static string GetAgentName(string hid)
  {//select name,* from tblAgent
   string str = string.Empty;
   var agent = DB.Context.From<Model.tblAgent>().Select(a => a.name)
    .Where(a => a.AgentID == int.Parse(hid)).ToList();
   foreach (var item in agent)
   {
    str = item.name;
   }
   return str;
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
深入理解JavaScript编程中的同步与异步机制
Jun 24 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Aug 27 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
js实现列表按字母排序
Aug 11 Javascript
使用node-media-server搭建一个简易的流媒体服务器
Jan 20 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 #Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 #Javascript
vue-router跳转页面的方法
Feb 09 #Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 #Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 #Javascript
js 数据存储和DOM编程
Feb 09 #Javascript
超全面的javascript中变量命名规则
Feb 09 #Javascript
You might like
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
Python Web服务器Tornado使用小结
2014/05/06 Python
Python中分数的相关使用教程
2015/03/30 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
使用Python绘制图表大全总结
2017/02/11 Python
详解Python 正则表达式模块
2018/11/05 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
一套中级Java程序员笔试题
2015/01/14 面试题
书香校园活动方案
2014/02/28 职场文书
一帮一活动总结
2014/05/08 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
公司禁烟通知
2015/04/23 职场文书
同学聚会感言一句话
2015/07/30 职场文书
护士心得体会范文
2016/01/25 职场文书
微信小程序调用python模型
2022/04/21 Python