设为首页收藏本站
开启辅助访问 切换到窄版

lufy's legend

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
lufy's legend»论坛 › lufylegend.js引擎 › 使用疑问 › 【请教】如何用lufylegend打开本地图片并显示 ...
返回列表 发新帖
查看: 6248|回复: 1
打印 上一主题 下一主题

【请教】如何用lufylegend打开本地图片并显示

[复制链接]
yorhomwang

46

主题

3

好友

1866

积分

偏将军

Rank: 4
跳转到指定楼层
楼主
发表于 2013-5-5 22:47:22 |只看该作者 |倒序浏览
首先假设我们要做一个图片编辑器，但是如何打开本地图片呢？
比如我们做一个按钮，当别人按下它时弹出一个框：

在这个框里选择图片，然后打开它。
请问这个怎么用lufylegend实现？？
回复

使用道具 举报

lufy

37

主题

8

好友

9312

积分

诸侯王

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15
沙发
发表于 2013-5-6 07:47:27 |只看该作者
这个功能是HTML5的新功能，使用file标签和FileReader可以实现。
代码如下
  1. <!DOCTYPE HTML>
  2. <html lang="ja">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>HTML5读取图片</title>
  6.     </head>
  7.     <body>
  8.         <input id="fileInput" type="file" onchange="readInput()" />

  10.         <img id="imgview" src="" alt="" />
  11.         <script>
  12.             function readInput(){
  13.                 var fileInput = document.getElementById("fileInput");
  14.                 if (!fileInput.files.length) {
  15.                     return;
  16.                 }

  18.                 var file = fileInput.files[0],
  19.                     fileReader = new FileReader();

  21.                 fileReader.onload = function(event) {
  22.                         document.getElementById("imgview").src = event.target.result;
  23.                 };

  25.                 fileReader.readAsDataURL(file);
  26.             }
  27.         </script>
  28.     </body>
  29. </html>
复制代码
测试连接
http://lufylegend.com/demo/test/4.html
想详细了解的话，百度一下“html5 file API”，教程很多的。
不回答与技术和引擎不相关的问题
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

防止垃圾广告，请填写任意字符

Archiver|lufy's legend

GMT+8, 2024-5-7 00:06 , Processed in 0.043785 second(s), 20 queries .

Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

回顶部