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 相关文章推荐
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
JSON 学习之JSON in JavaScript详细使用说明
Feb 23 Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
js charAt的使用示例
Feb 18 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 Javascript
three.js加载obj模型的实例代码
Nov 10 Javascript
JavaScript中的类型检查
Feb 03 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
express异步函数异常捕获示例详解
Nov 30 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 24 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
一个简单的PHP入门源程序
2006/10/09 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
Js放到HTML文件中的哪个位置有什么区别
2013/08/21 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
javascript如何写热点图
2015/12/08 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
Python的Flask框架中web表单的教程
2015/04/20 Python
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
python中threading超线程用法实例分析
2015/05/16 Python
Python变量作用范围实例分析
2015/07/07 Python
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
某公司面试题
2012/03/05 面试题
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js