解析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下的keyCode键码值表
Apr 10 Javascript
JAVASCRIPT下判断IE与FF的比较简单的方式
Oct 17 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
Ionic如何创建APP项目
Jun 03 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
JavaScript箭头函数中的this详解
Jun 19 Javascript
微信小程序 如何保持登录状态
Aug 16 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 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
数据库的日期格式转换
2006/10/09 PHP
linux php mysql数据库备份实现代码
2009/03/10 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
javascript 得到变量类型的函数
2010/05/19 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
vue实现按钮切换图片
2021/01/20 Vue.js
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
python中sys.argv参数用法实例分析
2015/05/20 Python
python下载图片实现方法(超简单)
2017/07/21 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
python实现串口通信的示例代码
2020/02/10 Python
python nohup 实现远程运行不宕机操作
2020/04/16 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
厂长助理岗位职责
2013/12/27 职场文书
三个儿子教学反思
2014/02/03 职场文书
五年级学生评语
2014/04/22 职场文书
公司联欢会策划方案
2014/05/19 职场文书
教师工作表现自我评价
2015/03/05 职场文书
文明礼貌主题班会
2015/08/14 职场文书
信息技术研修心得体会
2016/01/08 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫