jQuery頁(yè)面彈出框?qū)崿F(xiàn)文件上傳
更新時(shí)間：2022年02月22日 15:19:06 作者：sunping177
這篇文章主要為大家詳細(xì)介紹了jQuery頁(yè)面彈出框?qū)崿F(xiàn)文件上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jQuery頁(yè)面彈出框?qū)崿F(xiàn)文件上傳的具體代碼，供大家參考，具體內(nèi)容如下
如圖所示，點(diǎn)擊新增，彈出如圖的彈出框，點(diǎn)擊取消不保存頁(yè)面信息，點(diǎn)擊確定保存頁(yè)面信息
在前臺(tái)頁(yè)面添加一個(gè)標(biāo)簽，任何都可以
<div class="btn btn-default" id="divadd">新增</div>
寫彈出框頁(yè)面
<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 />
起始時(shí)間：<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">
      人數(shù)<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>
通過(guò)jQuery控制顯示或隱藏
$(function () {
//顯示DIV
$("#divadd").click(function () {
var hid = $("#hidValue").val();
if (hid == "") {
alert("請(qǐng)先提交信息再新增");
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);
}
});
});
});
這個(gè)是點(diǎn)擊新增添加新的代理的代碼
<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>
這個(gè)是一般處理程序
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表插入數(shù)據(jù)
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 "請(qǐng)?zhí)顚懲瓯靥铐?xiàng)";
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;
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 分享20多個(gè)很棒的jQuery 文件上傳插件或教程
- jQuery Ajax文件上傳(php)
- php+jQuery.uploadify實(shí)現(xiàn)文件上傳教程
- Jquery Uploadify多文件上傳帶進(jìn)度條且傳遞自己的參數(shù)
- Jquery結(jié)合HTML5實(shí)現(xiàn)文件上傳
- 使用jQuery Uploader顯示文件上傳進(jìn)度
- jQuery文件上傳插件Uploadify使用指南
- jQuery實(shí)現(xiàn)文件上傳進(jìn)度條特效
- jquery插件ajaxupload實(shí)現(xiàn)文件上傳操作
- js jquery分別實(shí)現(xiàn)動(dòng)態(tài)的文件上傳操作按鈕的添加和刪除
相關(guān)文章
Jquery的Tabs內(nèi)容輪換效果實(shí)現(xiàn)代碼,幾行搞定
本篇文章主要是對(duì)Jquery的Tabs內(nèi)容輪換效果的實(shí)現(xiàn)代碼進(jìn)行了介紹。幾行代碼輕松搞定2014-02-02
jQuery插件FusionWidgets實(shí)現(xiàn)的AngularGauge圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionWidgets實(shí)現(xiàn)的AngularGauge圖效果,結(jié)合具體實(shí)例形式分析了jQuery使用FusionWidgets插件載入xml數(shù)據(jù)實(shí)現(xiàn)AngularGauge圖的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03 
基于JQuery實(shí)現(xiàn)CheckBox全選全不選
做項(xiàng)目時(shí)需要實(shí)現(xiàn)CheckBox的全選，我想用JQuery實(shí)現(xiàn)，從網(wǎng)上找了找，網(wǎng)上的確有很多例子，但都不能實(shí)現(xiàn)我想要的全部效果
2011-06-06 
全選、全非選即取得被選中的值在日常開發(fā)應(yīng)用中很廣泛，下面有個(gè)不錯(cuò)的示例，大家可以感受下
2013-11-11 
下面小編就為大家?guī)?lái)一篇jquery 一鍵復(fù)制到剪切板的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09 
這是一個(gè)基于jquery的文字向上跑動(dòng)，其效果類似跑馬燈，在某些情況下還是比較實(shí)用的，下面與大家分享下實(shí)現(xiàn)代碼
2014-09-09 
這篇文章向大家推薦20款效果非常棒的 jQuery 插件。jQuery 是一個(gè)非常優(yōu)秀的JavaScript庫(kù)，它簡(jiǎn)化了 HTML 文檔遍歷，事件處理，動(dòng)畫以及 Ajax 交互，同時(shí)也改變了很多人編寫 JavaScript 代碼的方式
2011-11-11 
基于PHP和Mysql相結(jié)合使用jqGrid讀取數(shù)據(jù)并顯示
jqGrid可以動(dòng)態(tài)讀取和加載外部數(shù)據(jù)，本文將結(jié)合PHP和Mysql給大家講解如何使用jqGrid讀取數(shù)據(jù)并顯示，以及可以通過(guò)輸入關(guān)鍵字查詢數(shù)據(jù)的ajax交互過(guò)程
2015-12-12 
jquery全選checkBox功能實(shí)現(xiàn)代碼(取消全選功能)
這篇文章主要介紹了jquery實(shí)現(xiàn)checkBox全選功能、取消全選功能，代碼簡(jiǎn)單，大家可以直接參考使用
2013-12-12