HTML5图片上传预览，手机端

最新推荐文章于 2023-07-21 15:54:15 发布

happylifeng

最新推荐文章于 2023-07-21 15:54:15 发布

阅读量659

点赞数

分类专栏： HTML5 文章标签： html5 html

本文链接：https://blog.csdn.net/happylifeng/article/details/84824749

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8" />
        <meta name="author" content="EdieLei" />
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport">
        <title>HTML5 图片上传预览</title>
        <style>
            #photo{ width:100px; height:100px; margin:auto; margin-top:100px; background:#0cc; border-radius:100px;}
            #photo img{ width:100px; height:100px; border-radius:50px;}
        </style>
        <script src="js/jquery.min.js"></script>

        <script type="text/javascript">
            $(function() {
                $('#img').change(function() {
                    var file = this.files[0];
                    var r = new FileReader();
                    r.readAsDataURL(file);
                    $(r).load(function() {
                        $('#photo').html('<img src="' + this.result + '" alt="" />');
                    })
                })
            })

        </script>
    </head>
    <body>
        <h3>HTML5 图片上传预览</h3>
        <input id="img" type="file" accept="image/*" />
        <div id="photo"></div>
    </body>
</html>

happylifeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5图片上传预览，手机端

&lt;!DOCTYPE html&gt;&lt;html lang="zh-cn"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta name="author" content="EdieLei" /&gt; &am
复制链接

扫一扫