Question

如何实现Jquery的LigerUI文件上传

Answer 1

1. 在Head中加入
   <script src="../lib/js/ajaxfileupload.js" type="text/javascript"></script>
   <script src="../lib/js/ligerui.expand.js" type="text/javascript"></script>

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

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

4. 、后台cs，写一句关键的，可以返回参数，前台提示
   string url = Server.MapPath("/Image/" + gfilename + filenameext); // 执行上传操作

Answer 2

一、在Head中加入
<script src="../lib/js/ajaxfileupload.js" type="text/javascript"></script>
<script src="../lib/js/ligerui.expand.js" type="text/javascript"></script>
二、Html中的Div代码
[html] view plaincopy
<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); // 执行上传操作