解析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 相关文章推荐
javascript StringBuilder类实现
Dec 22 Javascript
JavaScript游戏之是男人就下100层代码打包
Nov 08 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
简单的分页代码js实现
May 17 Javascript
JavaScript中两个字符串的匹配
Jun 08 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
SVG动画vivus.js库使用小结(实例代码)
Sep 14 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
5 种JavaScript编码规范
Jan 30 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 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获取数组长度或某个值出现次数的方法
2015/02/11 PHP
php实现文件预览功能
2017/05/23 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
javascript轮播图算法
2016/10/21 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
js实现秒表计时器
2019/12/16 Javascript
原生javascript制作的拼图游戏实现方法详解
2020/02/23 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
浅谈python标准库--functools.partial
2019/03/13 Python
Django中信号signals的简单使用方法
2019/07/04 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
实习协议书
2015/01/27 职场文书
新教师个人总结
2015/02/06 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
PHP中多字节字符串操作实例详解
2021/08/23 PHP