解析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 相关文章推荐
做网页的一些技巧(续)
Feb 01 Javascript
Jquery 动态添加按钮实现代码
May 06 Javascript
基于jquery循环map功能的代码
Feb 26 Javascript
解析JavaScript中的不可见数据类型
Dec 02 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
angular2 NgModel模块的具体使用方法
Apr 10 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 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
PHP4实际应用经验篇(3)
2006/10/09 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
php 删除cookie方法详解
2014/12/01 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
popdiv
2006/07/14 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
Python txt文件如何转换成字典
2020/11/03 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
比驿:全球酒店比价网
2018/06/20 全球购物
化工工艺专业求职信
2013/09/22 职场文书
八年级美术教学反思
2014/02/02 职场文书
计算机大学生职业生涯规划书范文
2014/02/19 职场文书
元旦晚会活动总结
2014/07/09 职场文书
表扬信格式模板
2015/05/05 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
Python一行代码实现自动发邮件功能
2021/05/30 Python
css3应用示例:新增的选择器
2022/03/16 HTML / CSS