解析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 相关文章推荐
IE6与IE7中,innerHTML获取param的区别
Mar 15 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
JavaScript页面加载事件实例讲解
Sep 01 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 Javascript
梳理一下vue中的生命周期
Dec 30 Vue.js
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
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
javascript实现原生ajax的几种方法介绍
2013/09/21 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
python奇偶行分开存储实现代码
2018/03/19 Python
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
python实现画循环圆
2019/11/23 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
python中def是做什么的
2020/06/10 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
Python 串口通信的实现
2020/09/29 Python
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
面向对象设计的原则是什么
2013/02/13 面试题
材料化学应届生求职信
2013/10/09 职场文书
2014年三八妇女节活动方案
2014/02/28 职场文书
出纳会计岗位职责
2014/03/12 职场文书
2014年超市工作总结
2014/11/19 职场文书
实习报告怎么写
2019/06/20 职场文书
用php如何解决大文件分片上传问题
2021/07/07 PHP
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL
Python装饰器详细介绍
2022/03/25 Python