Jquery+LigerUI实现文件上传步骤详解

来源：易妖游戏网

这次给大家带来Jquery+LigerUI实现文件上传步骤详解，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中的p代码

<p id="AppendBill_p" 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>
 </p>

三、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_p"), 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

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

全部频道

Jquery+LigerUI实现文件上传步骤详解