解析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 相关文章推荐
用正则xmlHttp实现的偷(转)
Jan 22 Javascript
基于jquery实现状态限定编辑的代码
Feb 11 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
react中使用swiper的具体方法
May 15 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
JavaScript实现页面高亮操作提示和蒙板
Jan 04 Javascript
JS ES6异步解决方案
Apr 29 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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
PHP批量生成缩略图的代码
2008/07/19 PHP
PHP Undefined index报错的修复方法
2011/07/17 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
Python实现矩阵转置的方法分析
2017/11/24 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
Python 自由定制表格的实现示例
2020/03/20 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
本科生学习总结的自我评价
2013/10/02 职场文书
前台接待的工作职责
2013/11/21 职场文书
办公室岗位职责
2014/02/12 职场文书
护士长竞聘演讲稿
2014/04/30 职场文书
校庆标语集锦
2014/06/25 职场文书
公司合作协议范文
2014/10/01 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL
springboot读取nacos配置文件
2022/05/20 Java/Android
MySQL transaction事务安全示例讲解
2022/06/21 MySQL