解析Jquery的LigerUI如何实现文件上传


Posted in Javascript onJuly 09, 2013

一、在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);   // 执行上传操作
Javascript 相关文章推荐
js 效率组装字符串 StringBuffer
Dec 23 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
JS学习笔记之数组去重实现方法小结
May 29 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 #Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
Jul 09 #Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
Jul 09 #Javascript
浅析js中取绝对值的2种方法
Jul 09 #Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 #Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 #Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 #Javascript
You might like
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
PHP中require和include路径问题详解
2014/12/25 PHP
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
python基础教程之序列详解
2014/08/29 Python
利用Python将时间或时间间隔转为ISO 8601格式方法示例
2017/09/05 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
Python3 log10()函数简单用法
2019/02/19 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
继承公证书
2014/04/09 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
大学军训的体会
2014/11/08 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python
SpringBoot+VUE实现数据表格的实战
2021/08/02 Java/Android
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers