基于FileReader实现的图片网页本地浏览

最新推荐文章于 2023-02-16 10:07:24 发布

蚂蚁bei大象

最新推荐文章于 2023-02-16 10:07:24 发布

阅读量434

点赞数

分类专栏： Web 文章标签：图片 FileReader 图片预览 WEB

本文链接：https://blog.csdn.net/ljbmxsm/article/details/51204571

版权

Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片本地浏览</title>
    <script type="text/javascript">
        fileReader = new FileReader();
        fileReader.addEventListener('load',function(e){
            console.log(e.target.result);
            document.getElementById('uploadPreview').src = e.target.result;
        },false);
        /*fileReader.onload = function(e){
            console.log(e.target.result);
            document.getElementById('uploadPreview').src = e.target.result;
        };*/
        function loadImageFile(){
            var files = document.getElementById('uploadImage').files;
            fileReader.readAsDataURL(files[0]);
        }
    </script>
</head>
<body>
    <form name="uploadForm">
    <table>
      <tbody>
        <tr>
          <td><img id="uploadPreview" style="width: 100px; height: 100px;" src="" alt="Image preview" /></td>
          <td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td>
        </tr>
      </tbody>
    </table>

    <p><input type="submit" value="Send" /></p>
  </form>
</body>
</html>