lufy's legend

标题: 【请教】如何用lufylegend打开本地图片并显示 [打印本页]
作者: yorhomwang    时间: 2013-5-5 22:47
标题: 【请教】如何用lufylegend打开本地图片并显示
首先假设我们要做一个图片编辑器，但是如何打开本地图片呢？
比如我们做一个按钮，当别人按下它时弹出一个框：

在这个框里选择图片，然后打开它。
请问这个怎么用lufylegend实现？？
作者: lufy    时间: 2013-5-6 07:47
这个功能是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”，教程很多的。



欢迎光临 lufy's legend (http://lufylegend.com/forum/) Powered by Discuz! X2.5