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 相关文章推荐
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
Javascript实现滚动图片新闻的实例代码
Nov 27 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
Ionic + Angular.js实现图片轮播的方法示例
May 21 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 Javascript
JS实现简单的九宫格抽奖
Jun 28 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制作简单的内容采集器的原理分析
2008/10/01 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
Python实现定时精度可调节的定时器
2018/04/15 Python
python在每个字符后添加空格的实例
2018/05/07 Python
python3 读取Excel表格中的数据
2018/10/16 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
python中常见错误及解决方法
2020/06/21 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
python 装饰器重要在哪
2021/02/14 Python
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
青年志愿者事迹材料
2014/02/07 职场文书
欢送退休感言
2014/02/08 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
产品质量承诺书
2014/03/27 职场文书
升职演讲稿范文
2014/05/23 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
医生见习报告范文
2014/11/03 职场文书
财务检查整改报告
2014/11/06 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书