解析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 相关文章推荐
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 Javascript
vue实现移动端返回顶部
Oct 12 Javascript
Vue中computed和watch有哪些区别
Dec 19 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 session有效期问题
2009/04/26 PHP
php 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
php对数组排序的简单实例
2013/12/25 PHP
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
Python实现将Excel转换为json的方法示例
2017/08/05 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
一套C#面试题
2013/10/09 面试题
竞选演讲稿范文
2013/12/28 职场文书
大学毕业感言200字
2014/03/09 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
趵突泉导游词
2015/02/03 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
计划生育目标责任书
2015/05/09 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
Python办公自动化解决world文件批量转换
2021/09/15 Python