html 选择本地图片，显示选择的图片

最新推荐文章于 2024-04-29 17:39:04 发布

weixin_30595035

最新推荐文章于 2024-04-29 17:39:04 发布

阅读量6.4k

点赞数 5

文章标签：前端 c/c++ ViewUI

原文链接：http://www.cnblogs.com/ZhYQ-Note/p/5897609.html

版权

主要用的是html5的文件系统部分：

<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=0.1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>xxx</title>
<script src="im.js"></script>
<script>
function handleFiles(files) {
  var preview = document.getElementById('preview');
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var imageType = /^image\//;

    if ( !imageType.test(file.type) ) {
      continue;
    }

    var img = document.createElement("img");
    img.classList.add("obj");
    img.file = file;
    // 假设 "preview" 是将要展示图片的 div
    preview.appendChild(img);

    var reader = new FileReader();
    reader.onload = (function(aImg) {
      return function(e) {
        aImg.src = e.target.result;
      };
    })(img);
    reader.readAsDataURL(file);
  }
}
</script>
</head>
<body style="margin: 25px;">
<input type="file" id="input" onchange="handleFiles(this.files)">
<div id = "preview"></div>
<!-- <img src="file:///Users/staff/Desktop/%E5%9C%B0%E8%A1%A8.png" width="2500" height="650"> -->
</body>
</html>

参考：

https://developer.mozilla.org/zh-CN/docs/Using_files_from_web_applications

http://hushicai.com/2014/03/29/html5-du-qu-ben-di-wen-jian.html

http://www.html5rocks.com/zh/tutorials/file/filesystem/#toc-file

转载于:https://www.cnblogs.com/ZhYQ-Note/p/5897609.html

weixin_30595035

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
html 选择本地图片，显示选择的图片

主要用的是html5的文件系统部分：<html><head><meta name="viewport" content="width=device-width, minimum-scale=0.1"><meta http-equiv="content-type" content="text/html; charset=UTF-8" /&...
复制链接

扫一扫