0
点赞
收藏
分享

微信扫一扫

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);   // 执行上传操作

举报

相关推荐

0 条评论