html5上传图片到页面

最新推荐文章于 2021-06-09 18:10:40 发布

王明远

最新推荐文章于 2021-06-09 18:10:40 发布

阅读量599

点赞数 1

分类专栏： html5接口文章标签：上传图片 html接口 FileReader接口

本文链接：https://blog.csdn.net/wmy94827/article/details/60959140

版权

html5接口专栏收录该内容

4 篇文章 0 订阅

订阅专栏

我的html代码：

  
  
   
   
  
  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片上传</title>
</head>
<body>
    <div>
        <img src="" id="img-selected" οnclick="upload()" width="200" height="200" alt="点击处上传图片" style="text-align:center;line-height:200px"/>        
    </div>
    <input type="file" id="input-file" style="display:none" />
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
    <script type="text/javascript">
        function upload() {
            $("#input-file").click();
        }
        $(function () {
            document.getElementById('input-file').onchange = function () {
                var imgFile = this.files[0];
                var fr = new FileReader();
                fr.onload = function () {
                    $("#img-selected").attr("src", fr.result);
                };
                fr.readAsDataURL(imgFile);
            };
        });
    </script>
</body>
</html>