• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery页面弹出框实现文件上传

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

作者:sunping177 字体:[增加 减小] 来源:互联网

sunping177 通过本文主要向大家介绍了jQuery,弹出框,文件上传等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

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

<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.Con



 
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • 为jQuery增加join方法的实现代码
  • jQuery实现的导航下拉菜单效果
  • 利用jquery禁止外层滚动条的滚动
  • jQuery的观察者模式详解
  • jquery ui dialog替代confirm实例分析
  • jquery 中的each()跳出循环的语句
  • jquery div提示框渐隐弹出与隐藏效果
  • jQuery实现id模糊查询的小例子
  • Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
  • jQuery对于显示和隐藏等常用状态的判断方法

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 快速掌握jQuery插件开发
    • jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
    • 详解jQuery uploadify文件上传插件的使用方法
    • jQuery控制图片的hover效果(smartRollover.js)
    • jQuery插件ajaxFileUpload使用实例解析
    • 基于jQuery实现仿百度首页换肤背景图片切换代码
    • JQuery 实现的页面滚动时浮动窗口控件
    • js原生态函数中使用jQuery中的 $(this)无效的解决方法
    • jquery文档操作wrap()方法实例简述
    • 让新消息在网页标题闪烁提示的jQuery代码

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有