解析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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
JavaScript队列函数和异步执行详解
Jun 19 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 Javascript
解决Antd Table表头加Icon和气泡提示的坑
Nov 17 Javascript
Ajax是什么?Ajax高级用法之Axios技术
Apr 21 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
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
js 页面输出值
2008/11/30 Javascript
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
浅谈Vue 初始化性能优化
2017/08/31 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
Vue-Router模式和钩子的用法
2018/02/28 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
Python contextlib模块使用示例
2015/02/18 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
python爬虫基本知识
2018/03/05 Python
python-str,list,set间的转换实例
2018/06/27 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
Python实现某论坛自动签到功能
2019/08/20 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
九年级数学教学反思
2014/02/02 职场文书
领导干部廉政承诺书
2014/03/27 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
记者节感言
2015/08/03 职场文书
python xlwt模块的使用解析
2021/04/13 Python
Java使用JMeter进行高并发测试
2021/11/23 Java/Android
Java的Object类的九种方法
2022/04/13 Java/Android
Oracle锁表解决方法的详细记录
2022/06/05 Oracle