如何扩展EasyUI在页面中立即显示选中的本地图片

Advertisement

在编写前台页面的时候,有时需要将选中的图片夹杂着其他信息一起上传到服务端,在选着本地图片的时候,为了获得更好的效果,需要将该图片显示在页面上。

最初思路有两个,具体如下:

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在调用指定方法时,默认第一个参数为当前对象,而实际传入的参数,则作为第二个参数来使用。

Similar Posts:

  • jsp页面中不能显示图片

    在 AIX 5.3 操作系统,WebSphere 5.1 应用服务器 中发布企业应用 由于在登录的页面中要用到 校验码 (图片)来防止恶意用户用软件的登录, 但是把应用发布以后,发现 jsp 页面中的 图片 无法显示, 解决办法: 登录 websphere 的管理端: http://127.0.0.1:9090/admin 选择步骤如下: 服务器 - 应用程序服务器 - server1 - 进程定义 - Java 虚拟机 - 高级 Java 虚拟机 设置 在 一般 JVM 自变量 中输入 -Dj

  • Visual Basic 2005——如何在DataGridView控件的储存格中同时显示出文字与图片

    上次有读者说我写得太简单,那么我们今天就写个难一点的吧!很多用户询问,如何如图1所示,在DataGridView控件的储存格中同时显示出图片与文字. 图1 DataGridView控件并没有内建任何功能来让您在同一个储存格中显示出图片与文字.解决之道,是通过CellPaint等事件来完成自订的绘制作业. 以下我们建立一个衍生自DataGridViewTextBoxColumn的用户自订数据行类别,藉此于储存格内的文字旁边绘制一个图片.我们使用DataGridViewCellStyle.Paddi

  • 在UIWebView中自定义显示选中文字的编辑菜单项

    在iOS系统中,所谓"编辑菜单(Editing Menu)"和"上下文菜单(Contextual Menu)"是有区别的,但在桌面操作系统中,我们常说的"右键菜单"就已经囊括了"编辑菜单"和"上下文菜单".iOS将两者细分开来,大概是因为移动客户端显示屏大小限制,将所有菜单揉和在一起的话,必定导致超出显示范围,带来不好的操作体验. Editing Menu Contextual Menu 本文主要以UIWe

  • WEB页面中如何自动成比例缩放图片,鼠标滚轮缩放

    ---------------------原始代码------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type"

  • Joomla教程:在单篇文章页面中显示指定的模块

    通常,你可以通过模块设置中的"菜单分配(Menu Assignment)"将模块分配给某些菜单项,以在它们对应的页面里显示.但有时你想将模块分配给某个单篇文章页面,而该目标页面并没有其直接对应的菜单项.下面来看两种具体的情况. 前面我们学习了:Joomla教程:创建Joomla语言包安装插件 1.通过某篇文章中的链接才可以到达的目标文章页面 第一种情况就是只有通过某一篇文章的中链接才可以到达目标文章页面(目标文章页面本身并没有其直接对应的菜单项):你无法直接在模块设置中为其分配模块.

  • 用Seam实现:图片上传 + 保存到数据库 + 从数据库读出图片并显示到页面中

    上传图片并保存到数据库 seam给我们提供了 s:fileUpload 标签以完成文件上传功能.使用该标签时,要在web.xml中声明一个Seam的过滤器: <filter> <filter-name>Seam Filter</filter-name> <filter-class>org.jboss.seam.servlet.SeamFilter</filter-class> </filter> <filter-mapping&

  • Android : 如何在WebView显示的页面中查找内容

    Android : 如何在WebView显示的页面中查找内容 Author : Aoyousatuo Zhao http://blog.sina.com.cn/aoyousatuo WebView是Android提供的常用组件之一.它主要被设计用来显示html文件.正因为如此,所以在应用的开发过程中我们可以通过将需要显示的内容整理成html格式的 String从而轻松实现各种排版的效果. 虽然WebView组件封装了许多功能为应用的开发提供了便利,但是由于其开放的方法有限,有时候这种便利往往会给

  • Android中WebView显示HTML页面时右侧的空白

    在Android中使用WebView显示HTML页面时,整个右侧出现小段空白. 起初以为原因在于使用的背景图片时CSS属性设置的问题,但发现不是. 再次观察界面上空白的样子,觉得应该跟Scroll Bar有关系. 在Google上直接搜索了相关的关键词,找到下面这个web: android中webview显示html文件的时候右边的边框有办法去掉吗? 其中,提问者和问题回答者的解答对于遇到的问题是有效的. 问题解答者bashenmail的回答是: WebView 中 android:scroll

  • 工作流环境再起波澜,提示“当前显示的页面中包含无效的值”

    人工节点配置任务后,再打开提示"当前显示的页面中包含无效的值",查工作流实施指南问题解决的资料得知是本地配置的元数据和服务器上不一致所致,但我本地指定的元数据是和服务器上是同一目录,仅工作流安装目录的元数据是系统默认的,没有改动,而且其中的metas目录也是从服务器上拷贝的,所以应该说元数据是相同的,但问题却依然存在. 没有办法,安装以下步骤处理,问题解决. 1.在新的目录重装BOS5.4 2.重新导入解决方案 3.更新本地BOS5.4的jar包(是bos5.4的bug,之前博客有讲)

  • 关闭父页面中的用于显示本页面的子窗体: 刷新父页面的数据:

    关闭父页面中的用于显示本页面的子窗体: SubWindow.hideParent(); 刷新父页面的数据: parent.datasetMsg.flushData();

Tags: