解析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之Partial Application学习
Jan 10 Javascript
循环 vs 递归浅谈
Feb 28 Javascript
js继承call()和apply()方法总结
Dec 08 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 Javascript
vue调用语音播放的方法
Sep 27 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 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新手谈谈我的学习心得
2007/02/25 PHP
php在线代理转向代码
2012/05/05 PHP
php中利用explode函数分割字符串到数组
2014/02/08 PHP
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
PHP的引用详解
2015/02/22 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
Python进行数据科学工作的简单入门教程
2015/04/01 Python
selenium+python实现自动登录脚本
2018/04/22 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
学习新党章思想汇报
2014/01/09 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
2015员工年度考核评语
2015/03/25 职场文书
土建技术员岗位职责
2015/04/11 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
八年级数学教学反思
2016/02/17 职场文书