扩展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" sty...