解析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 学习笔记(十五)
Jan 28 Javascript
XENON基于JSON变种
Jul 27 Javascript
js修改地址栏URL参数解决url参数问题
Dec 15 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
关于js遍历表格的实例
Jul 10 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 Javascript
详解Vue3中对VDOM的改进
Apr 23 Javascript
js实现验证码功能
Jul 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 存取 MySQL 数据库的一个例子
2006/10/09 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
设定php简写功能的方法
2019/11/28 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
一个支付页面DEMO附截图
2014/07/22 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
Python中使用logging模块打印log日志详解
2015/04/05 Python
python 全文检索引擎详解
2017/04/25 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
争做文明公民倡议书
2014/08/29 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
教你用eclipse连接mysql数据库
2021/04/22 MySQL
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis
python数字图像处理:图像的绘制
2022/06/28 Python