解析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 学习笔记(十三)Dom创建表格
Jan 21 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
js去除浏览器默认底图的方法
Jun 08 Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
基于AngularJs select绑定数字类型的问题
Oct 08 Javascript
微信小程序配置服务器提示验证token失败的解决方法
Apr 03 Javascript
javascript之分片上传,断点续传的实际项目实现详解
Sep 05 Javascript
JavaScript实现原型封装轮播图
Dec 27 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 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中文验证码实现示例分享
2014/01/12 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
xml和web特殊字符
2009/04/28 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
jquery操作select大全
2014/04/25 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
JS全角与半角转化实例(分享)
2017/07/04 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
python实现文本文件合并
2015/12/29 Python
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
商场经理竞聘演讲稿
2014/01/01 职场文书
八一慰问活动方案
2014/02/07 职场文书
生产助理岗位职责
2014/06/18 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
2014年采购工作总结
2014/11/20 职场文书
培训简讯范文
2015/07/20 职场文书
篮球拉拉队口号
2015/12/25 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
试了下Golang实现try catch的方法
2021/07/01 Golang
Python中文纠错的简单实现
2021/07/07 Python