解析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 相关文章推荐
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
工作中常用到的JS表单验证代码(包括例子)
Nov 11 Javascript
js转义字符介绍
Nov 05 Javascript
尝试动手制作javascript放大镜效果
Dec 25 Javascript
AngularJS中实现动画效果的方法
Jul 28 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 Javascript
微信JS SDK接入的几点注意事项(必看篇)
Jun 23 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 Javascript
Vue操作Storage本地化存储
Apr 29 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
PHP集成FCK的函数代码
2008/09/27 PHP
php中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
ECMAScript6--解构
2017/03/30 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
Python: 传递列表副本方式
2019/12/19 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
浅析Python 多行匹配模式
2020/07/24 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
使用html5制作loading图的示例
2014/04/14 HTML / CSS
介绍一下Java中的static关键字
2012/05/12 面试题
2014年国培研修感言
2014/03/09 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
求职信内容怎么写
2014/05/26 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
买卖合同协议书范本
2014/10/18 职场文书
实习单位证明范例
2014/11/17 职场文书
英文导游词
2015/02/13 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers
python区块链实现简版工作量证明
2022/05/25 Python