萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 如何實現Jquery的LigerUI文件上傳

如何實現Jquery的LigerUI文件上傳

一、在Head中加入

<script src="../lib/js/ajaxfileupload.js" type="text/javascript"></script>
<script src="../lib/js/ligerui.expand.js" type="text/javascript"></script>

二、Html中的Div代碼

<div id="AppendBill_Div" style="display:none;"> <%-- 上傳 - 單 --%>
<table style="height:100%;width:100%">
<tr style="height:40px">
<td style="width:20%">
圖標:
</td>
<td><input type="file" style="width:200px" id="fileupload" name="fileupload"/>
</td>
</tr>

</table>

</div>

三、Js中-寫的是關鍵部分,會LigerUI的朋友-你懂得

1、grid中添加項【存地址字段】
{ display: "掃描件", name: "AppendBillPath", width: 120, type: "text", align: "left" }
2、Form可添加項【存地址和彈出選擇框】

{ name: "AppendBillPath1", type: "hidden" }, // --上傳-【5】--
{ display: "掃描件", name: "AppendBillPath", comboboxName: "AppendBillPath2", newline: true, labelWidth: 100, width: 150, space: 30, type: "select", options: {}} // --上傳-【6】--
$.ligerui.get("AppendBillPath2").set('onBeforeOpen', f_selectAppendBillPath_1) // 【掃描件】 // --上傳-【7】--
3、事件

// #region ======================================= 【上傳掃描件窗口】 // --上傳-【8】--


var AppendBillPathDetail = null;
function f_selectAppendBillPath_1() {
var imageurl = $("#AppendBill").val();
var AppendBill_Id = $("#AppendBill").val(); // 單號
if (imageurl.length == 0) {
LG.showError("您沒有輸入單號,請輸入隨單號!");
return;
}


if (AppendBillPathDetail) {
AppendBillPathDetail.show();


}
else {


AppendBillPathDetail = $.ligerDialog.open({
target: $("#AppendBill_Div"), title: '添加圖標',
width: 360, height: 170, top: 170, left: 280, // 彈出窗口大小
buttons: [
{ text: '上傳', onclick: function () { AppendBillPath_save(); } },
{ text: '取消', onclick: function () { AppendBillPathDetail.hide(); } }
]
});
}
}


function AppendBillPath_save()
{


var imgurl = $("#fileupload").val();
// var filehelpcode = $("#filehelpcode").val();

var extend = imgurl.substring(imgurl.lastIndexOf("."), imgurl.length);
extend = extend.toLowerCase();
if (extend == ".jpg" || extend == ".jpeg" || extend == ".png" || extend == ".gif" || extend == ".bmp")
{
}
else
{


LG.showError("請上傳jpg,jpep,png,gif,bmp格式的圖片文件");


return;
}
var imageurl = $("#AppendBill").val(); // extend
alert(imageurl);


$.ajaxFileUpload({
url: "../handle/ImageUpload.aspx?imageurl=" + imageurl, // --上傳-【9】-- aspx文件
secureuri: false,
fileElementId: "fileupload", //Input file id


dataType: "text",
success: function (data, status)
{


// ----------------- // 保存路徑


// $("#AppendBillPath2").val(Data);

LG.tip(data);
f_reload();
},
error: function (data, status, e) {
LG.showError(data);


}
});


}


// #endregion
四、後台cs,寫一句關鍵的,可以返回參數,前台提示

string url = Server.MapPath("/Image/" + gfilename + filenameext); // 執行上傳操作

copyright © 萬盛學電腦網 all rights reserved