码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-07-24 12:54:31      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:easyui   html5   javascript   

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

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

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





版权声明:本文为博主原创文章,未经博主允许不得转载。

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

标签:easyui   html5   javascript   

原文地址:http://blog.csdn.net/mole/article/details/47036901

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!