解析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 相关文章推荐
js/jQuery对象互转(快速操作dom元素)
Feb 04 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
详解addEventListener的三个参数之useCapture
Mar 16 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
AngularJS入门教程之过滤器详解
Aug 19 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 Javascript
详解jQuery中的事件
Dec 14 Javascript
JavaScrpt判断一个数是否是质数的实例代码
Jun 11 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 Javascript
JavaScript简易计算器制作
Jan 17 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
用PHP来写记数器(详细介绍)
2006/10/09 PHP
PHP 数组实例说明
2008/08/18 PHP
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
用php实现百度网盘图片直链的代码分享
2012/11/01 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
window.location.hash 使用说明
2010/11/08 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
js+html制作简单验证码
2017/02/16 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
JavaScript 数据类型详解
2017/03/13 Javascript
原生js实现简单的模态框示例
2017/09/08 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
详解python发送各类邮件的主要方法
2016/12/22 Python
python实现xlsx文件分析详解
2018/01/02 Python
python  Django中的apps.py的目的是什么
2018/10/15 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
python collections模块的使用
2020/10/16 Python
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
自考毕业自我鉴定范文
2013/10/27 职场文书
幼儿园英语教学反思
2014/01/30 职场文书
村干部培训班主持词
2014/03/28 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
六查六看心得体会
2014/10/14 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS