解析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 16 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
详解express与koa中间件模式对比
Aug 07 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
vue filters的使用详解
Jun 11 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
JavaScript实现英语单词题库
Dec 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中数组的三种排序方法分享
2012/05/07 PHP
php计算整个目录大小的方法
2015/06/19 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
php处理带有中文URL的方法
2016/07/11 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
Python生成pdf文件的方法
2014/08/04 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
捷克玩具商店:Bambule
2019/02/23 全球购物
文秘档案管理岗位职责
2014/03/06 职场文书
大型演出策划方案
2014/05/28 职场文书
高中综合实践活动总结
2014/07/07 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
战略合作意向书
2014/07/29 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
个人催款函范文
2015/06/23 职场文书
领导欢送会主持词
2015/07/06 职场文书
实习报告怎么写
2019/06/20 职场文书
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS