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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

jQuery怎麼讀取XML檔案內容

JQuery AJAX實作檔案下載

以上是Jquery+LigerUI實作檔案上傳步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！