Detailed explanation of the steps to implement file upload with Jquery+LigerUI

This time I will bring you a detailed explanation of the steps of Jquery LigerUI implementation File upload, what are the notes of Jquery LigerUI implementation of file upload, the following is a practical case, let's take a look.

This article analyzes and introduces the method of LigerUI in Jquery to implement file upload. Friends who need it can refer to it

1. Add to the Head

<script src="../lib/js/ajaxfileupload.js" type="text/
javascript
"></script>
    <script src="../lib/js/ligerui.expand.js" type="text/javascript"></script>

2. p code in Html

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

3. In Js - write the key part, friends who know LigerUI - you Understand 1. Add items to the grid [save address field]

 { display: "扫描件", name: "AppendBillPath", width: 120, type: "text", align: "left" }

2. Form can add items [save address and pop-up selection box]​​​

{ 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. Event

  // #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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How jQuery reads the content of XML files

##JQuery AJAX implementation file download

The above is the detailed content of Detailed explanation of the steps to implement file upload with Jquery+LigerUI. For more information, please follow other related articles on the PHP Chinese website!