如何扩展EasyUI在页面中立即显示选中的本地图片
来源:互联网 发布:php隐藏源码 编辑:程序博客网 时间:2024/05/17 02:22
在编写前台页面的时候,有时需要将选中的图片夹杂着其他信息一起上传到服务端,在选着本地图片的时候,为了获得更好的效果,需要将该图片显示在页面上。
最初思路有两个,具体如下:
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在调用指定方法时,默认第一个参数为当前对象,而实际传入的参数,则作为第二个参数来使用。
0 0
- 如何扩展EasyUI在页面中立即显示选中的本地图片
- 如何判断在ARM汇编中立即数的合法性?
- 在easyui的datagrid中如何显示图片?
- JSP页面如何显示本地图片
- JSP页面如何显示本地图片
- SP页面如何显示本地图片
- 如何在界面上显示本地图片
- 如何在界面上显示本地图片
- 在当前页面新建一个div浮动层显示选中的图片(div浮动层)
- gtk中立即出splash的问题
- js中立即执行函数的介绍
- JS中立即调用的函数表达式
- js中立即执行函数的理解
- 如何在页面加载时,显示选中一些选项
- 如何设置在jsp页面高亮显示选中的相同标签
- JSP页面如何显示(绝对路径)本地图片
- FileUpload在IE7、IE8页面中显示本地图片
- 读取本地图片显示在JSP页面上
- svn切换用户名-密码
- cf559A
- hdu 5301 Buildings
- Objective-C学习笔记(二十)——成员变量对对象方法与类方法的可见性分析
- MathType在PPT中的使用技巧
- 如何扩展EasyUI在页面中立即显示选中的本地图片
- 大数据时代传播研究中语料库分析方法的价值
- 怎样安装win10
- win2008分区方法
- 网络编程
- 挥洒力与美的律动 ——张治国书法印象
- Android开发学习笔记三Genymotion
- 嵌入式linux之分离分层概念,总线驱动设备模型
- mysql对xml提供支持的两个函数extractvalue updatexml