解析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 相关文章推荐
HTML中事件触发列表与解说
Jul 09 Javascript
通过百度地图获取公交线路的站点坐标的js代码
May 11 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
Jul 29 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 Javascript
js实现AI五子棋人机大战
May 28 Javascript
超详细小程序定位地图模块全系列开发教学
Nov 24 Javascript
vue使用echarts画组织结构图
Feb 06 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更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
PHP遍历数组的几种方法
2012/03/22 PHP
PHP编码转换
2012/11/05 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
php制作简单模版引擎
2016/04/07 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
javascript call和apply方法
2008/11/24 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
Python与Redis的连接教程
2015/04/22 Python
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
python写一个随机点名软件的实例
2019/11/28 Python
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
世界排名第一的万圣节服装店:Spirit Halloween
2018/10/16 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
回门宴答谢词
2014/01/13 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
2014年体育部工作总结
2014/11/13 职场文书
德能勤绩工作总结
2015/08/11 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
Python道路车道线检测的实现
2021/06/27 Python