扩展EasyUI在页面中马上显示选中的本地图片
在编写前台页面的时候,有时须要将选中的图片夹杂着其它信息一起上传到服务端,在选着本地图片的时候,为了获得更好的效果,须要将该图片显示在页面上。
最初思路有两个。详细例如以下:
1、获取选中文件的二进制数据再传递给画板,画出图片来。
2、获取选中文件的传递给Img标签。
经过測试,得到例如以下结果:
1、Img标签的src无法指向本地路径的文件,这应该是基于安全考虑的结果吧。
2、通过File API 读取的文件二进制数据无法直接传递给Cancav画板画出选中图片,这也许也是基于安全考虑的结果。
3、经过不懈努力。最终发现了一个解决方法,那就是通过File API的FileReader对象的readAsDataURL将本地图片创建出一个虚拟URL传递给Img标签的src。
具体代码例如以下:
当前项目是基于EasyUi的。以下是页面的对话框代码,请关注id="announcePicture"的文件控件,系统要求在该文件控件选择一个图片文件时,将其显示在id="img"的Img标签中。
<div id="announceDlg" class="easyui-dialog" style="width:400px;height:550px;padding:10px 20px" closed="true" buttons="#announceDlg-buttons"> <div class="ftitle">公告信息</div> <form id="fm" method="post" enctype="multipart/form-data"> <div class="fitem"> <label>公告Id:</label> <input id="announceId" name="announceId" class="easyui-textbox" type="text" value=""> </div> <div class="fitem"> <label>标题:</label> <input type="text" id="announceTitle" name="announceTitle" class="easyui-textbox" value="" data-options="required:true"> </div> <div class="fitem"> <label>文件:</label> <input class="easyui-filebox" id="announcePicture" name="announcePicture" value="" style=""> </div> <div class="fitem"> <label>内容:</label> <input type="text" id="announceContent" name="announceContent" class="easyui-textbox" value="" data-options="iconCls:'icon-search',multiline:true,required:true" style="height:120px"> </div> <div class="fitem"> <label></label> <img id="img" style="width:160px;height:160px" /> </div> </form> </div> <div id="announceDlg-buttons"> <a href="javascript:void(0)" class="easyui-linkbutton c6" iconcls="icon-ok" onclick="save()" style="width:90px">Save</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#announceDlg').dialog('close')" style="width:90px">Cancel</a> </div>
以下是对EasyUI进行的拓展,添加了getFile方法。该方法能够获取当前FileBox对象选中的文件的File对象。
$.extend($.fn.filebox.methods, { getFile: function (myself) { var temp = $(myself).next().children("[type='file']"); var file = document.getElementById(temp.attr("id")); if (file.files.length > 0) { // 若选中一个文件,则返回该文件的File对象 return file.files[0]; } // 若未选中不论什么文件,则返回null return null; } });
以下是设置FileBox对象的OnChange事件,当选择一个图片后。执行当中定义的事件处理函数:
$("#announcePicture").filebox({ onChange: function (event) { // 获取所选文件的File对象 var file = $(this).filebox("getFile"); if (file != null) { // 创建FileReader对象 var reader = new window.FileReader(); // 定义reader的onload事件 // 当读完文件信息后触发onload事件 reader.onload = function (e) { // reader.result保存着产生的虚拟URL $("#img").attr("src", this.result); } // 读取指定文件并形成URL reader.readAsDataURL(file); } } });
细心的各位一定会发现,在FileBox对象的OnChange事件处理函数内调用getFile时并未传递不论什么阐述。可是在getFile函数中却有一个myself參数被运用了。要了解这点须要看一下EasyUI中处理FileBox的源码:
$.fn.filebox = function (_4ed, _4ee) { if (typeof _4ed == "string") { var _4ef = $.fn.filebox.methods[_4ed]; if (_4ef) { return _4ef(this, _4ee); } else { return this.textbox(_4ed, _4ee); } } _4ed = _4ed || {}; return this.each(function () { var _4f0 = $.data(this, "filebox"); if (_4f0) { $.extend(_4f0.options, _4ed); } else { $.data(this, "filebox", { options: $.extend({}, $.fn.filebox.defaults, $.fn.filebox.parseOptions(this), _4ed) }); } _4ea(this); }); };
看到 return _4ef(this, _4ee); 这句语句了吗?EasyUI在调用指定方法时,默认第一个參数为当前对象,而实际传入的參数,则作为第二个參数来使用。
原文发布时间为: 2018 年 01 月 01 日
原文作者: 会哭的鳄鱼
本文来源:开源中国 如需转载请联系原作者
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
为什么自制脚本语言是编程语言的最高境界?
编程达到一个高的境界就是自制脚本语言,通过这可以精通编程里面的高深的技术,如编译原理、语言处理器、编译器与解释器,这些都是代表一个程序员实力的技术。 每个程序员都有实现属于自己编程语言的梦想,说其是梦想,原因是实现的难度很大......这种情况一直持续到《自制编程语言》的出现。 《自制编程语言》 郑钢著 本书讲的是纯粹的技术“干货”,符合郑钢老师一贯的写作风格,这是他静心写出来的东西,内容满满,很值得阅读。滴滴系统部技术高级总监于晓声说:“很高兴能成为本书的首批读者,也很高兴能为本书写推荐序。” 刚拿到本书手稿时,从书名上我意识到这是对我胃口的书。果然,整书阅读以后,收获颇多。如今程序员的开发成本已经很低了,项目中有各种成熟的框架和库可供选择和使用,但还有人能静下心来研究编译器这么底层的技术,实属难得。本书犹如一把火炬,点燃了技术人内心对开发的热情。 依稀记得2010年年初在百度与郑钢初次见面的情景,那时他工作之余的时间基本都用在向各个技术专家请教、讨论各类技术问题上,他是我带过的人中最勤奋的人之一。时间荏苒,一分耕耘一分收获,看到他今天的成长,尤感欣慰。 本书讲述了一门脚本语...
- 下一篇
7月24日云栖精选夜读丨暖心!阿里安全白帽挖漏洞做公益 连收2462封山区小孩感谢信
近日,阿里巴巴安全部安全专家木雁收到一份特别的礼物——整整2462封感谢信。 热点热议 暖心!阿里安全白帽挖漏洞做公益 连收2462封山区小孩感谢信 作者:华蒙 手把手教你用Python分析豆瓣电影——以《我不是药神》《邪不压正》为例 作者:技术小能手 2018年10大最佳SDN解决方案(迄今为止) 作者:技术小能手 知识整理 如何提高一个研发团队的“代码速度”? 作者:技术小能手 基于 TensorFlow 、OpenCV 和 Docker 的实时视频目标检测 作者:雷锋网 JavaScript函数式编程之pointfree与声明式编程 作者:a独家记忆 推荐系统遇上深度学习(四)--多值离散特征的embedding解决方案 作者:技术小能手 阿里云ET工业大脑发布AI视觉产品“见远”:电池片、车辆、路面都能被“诊断” 作者:阿里云头条 美文回顾 月薪8000和月薪30000的程序员差在哪里? 作者:技术小能手 前后端分离实践:基于vue实现网站前台的权限管理 作者:小和子茶 为什么说Web开发和Vue.js是如此的有趣? 作者:小和子茶 三舰护航,看懂球帝如何应对日增百万用户 作者...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- MySQL8.0.19开启GTID主从同步CentOS8
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- CentOS8编译安装MySQL8.0.19
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- SpringBoot2整合Redis,开启缓存,提高访问速度
- CentOS关闭SELinux安全模块
- Hadoop3单机部署,实现最简伪集群
- CentOS6,7,8上安装Nginx,支持https2.0的开启