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

最初思路有两个。详细例如以下：

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