コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > jQueryポップアップページボックスとポップアップボックスのファイルアップロード関数コードの詳細説明

jQueryポップアップページボックスとポップアップボックスのファイルアップロード関数コードの詳細説明

伊谢尔伦
リリース： 2017-06-19 10:28:50
オリジナル
2845 人が閲覧しました

この記事では、jQuery ポップアップ ページ ボックスと、ポップアップ ボックスの ファイル アップロード 機能を実装するコード例を紹介します。これには一定の参考値があり、興味のある友人はそれを参照できます。

「追加」をクリックすると、図に示すようなポップアップボックスが表示されます。ページ情報を保存しない場合は「キャンセル」をクリックし、ページ情報を保存するには「OK」をクリックします。 フロント ページにラベルを追加します。何でも可能です

<p class="btn btn-default" id="padd">新增</p>
ログイン後にコピー

ポップアップ ボックス ページを作成します

<p 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;"></p>
  <p 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>
   <p id="popup_content" class="confirm" style="margin-top: 0px;">
    <p id="popup_message">
     <p style="width: 500px;">
      <hr style="margin: 10px 0;" />
      <p id="pswitchinfo" style="margin-bottom: 8px;"></p>
      <p style="height: 300px; width: 450px;" id="piframe">

       <p id="pContract">
        <p 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: &#39;txtCStartTime&#39; })">-
         <input type="text" value="" id="txtCEndTime" onfocus="WdatePicker({ el: &#39;txtCEndTime&#39; })" style="width: 150px"><br />
         合同附件：
         <asp:FileUpload ID="fileID" runat="server" />
        </p>
       </p>
       <input type="button" id="btnAdd" value=&#39;新增&#39; />
       <input type="hidden" id="hidValue" runat="server" />
       <p id="UDFBlock">
        <p id="udf_template">
         &nbsp &nbsp &nbsp 人数<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>
       </p>
      </p>
     </p>
    </p>
    <p 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" />
    </p>
   </p>
  </p>
ログイン後にコピー

jQuery を使用して表示または非表示を制御します

 $(function () {
 //显示p
   $("#padd").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=&#39;txtNum01&#39;]"),
      values = $("[tag=&#39;txtNum02&#39;]"),
      precent = $("[tag=&#39;txtPercent&#39;]"),
      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: "{&#39;txt&#39;:&#39;" + txt + "&#39;,&#39;contractName&#39;:&#39;" + contractName + "&#39;,&#39;hid&#39;:&#39;" + hid + "&#39;,&#39;startTime&#39;:&#39;" + startTime + "&#39;,&#39;endTime&#39;:&#39;" + endTime + "&#39;,&#39;pic&#39;:&#39;" + pic + "&#39;}",
     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=&#39;txtNum01&#39;]").size() < 7) {
     $("#udf_template").clone().find(":text").val("").end().find("a").click(function () { $(this).parents(&#39;p&#39;).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(&#39;;&#39;);
     foreach (var item in strrList)
     {
      string[] templist = item.Split(&#39;,&#39;);
      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=&#39;&#39; and Name=&#39;&#39;
   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;
  }
ログイン後にコピー

以上がjQueryポップアップページボックスとポップアップボックスのファイルアップロード関数コードの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
jquery 成し遂げる ポップアップ ページ
ソース：php.cn
前の記事：jquery.ajax()のgetメソッドとpostメソッドの使い方を詳しく解説 次の記事：jQueryのセレクターとコンテキストのいくつかの呼び出しメソッドのコード例の詳細な説明
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
jqueryを使用してHTMLデータテーブルの選択されていない行の値を取得する方法 ボタンがクリックされなかったすべての行の値を取得しようとしています。たとえば、最初の行のボタンをクリックしたときに、クリックされなかった行の値を取得したいとします。 vartabl...
から 2024-04-05 09:26:49
0
1
1418
エンドユーザーの現在の選択に基づいて選択ボックスから選択したオプションを移動するには、jquery スクリプトが必要です エンドユーザーが選択ボックス要素を介してアイテムをランク付けできる HTML ページがあります。簡単なデモを確認するには、フィドルを参照してください: https://jsfidd...
から 2024-04-04 18:40:04
0
1
3528
ブックマークを介して純粋な CSS で要素を作成しました。作成されたが表示されない 私のコードは次のとおりです: g=document.createElement('div');g.setAttribute("id","divcont...
から 2024-04-04 17:27:27
0
1
417
Safari/Firefox iOS でフォ​​ームデータを送信できない これは、iOS 上の Safari/Firefox を除くすべてのプラットフォームで動作します: jQuery("#gform_1").one('submit'...
から 2024-04-04 12:53:48
0
1
303
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート