解析Jquery的LigerUI如何实现文件上传
更新时间:2013年07月09日 11:15:59 作者:
本篇文章是对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); // 执行上传操作
<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); // 执行上传操作
相关文章
jquery.autocomplete修改实现键盘上下键自动填充示例
根据需求要实现通过键盘上下移动,获得联想菜单中的值,如同google baidu的查询功能,下面的代码是自己手写的,喜欢的朋友可以尝试操作下2013-11-11
基于jquery的选择标签至文本域效果,可多选/可过滤重复/可限制个数的实现代码
选择标签至表单域插件, 基于jQuery, 可多选/可过滤重复/可限制个数. 是以前的项目中用到过的一个项目, 当初是用原生js东拼西凑的, 用jQuery重写了下,已封装成插件.2010-11-11
3Z版基于jquery的图片复选框(asp.net+jquery)
最近在做一个彩票缩水工具,找了几个图片复选框插件始终感觉不太满意,自己动手山寨了一下imageTick插件.2010-04-04
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
这篇文章主要介绍了jQuery实现漂亮实用的商品图片tips提示框效果,具有鼠标滑过显示动态提示框的效果,涉及针对鼠标事件的响应及页面元素动态操作技巧,需要的朋友可以参考下2016-04-04


最新评论