这次给大家带来Jquery+LigerUI实现文件上传步骤详解，Jquery+LigerUI实现文件上传的注意事项有哪些，下面就是实战案例，一起来看一下。

本篇文章是对Jquery中的LigerUI实现文件上传的方法，进行了分析介绍，需要的朋友可以参考下

一、在Head中加入   

<ｓｃｒｉｐｔ javascript></ｓｃｒｉｐｔ>    <ｓｃｒｉｐｔ></ｓｃｒｉｐｔ>

二、Html中的p代码

<p display :none>              </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: "ｓｅｌｅｃｔ", 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

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

推荐阅读：

jQuery怎么读取XML文件内容

JQuery+AJAX实现文件下载