zoukankan      html  css  js  c++  java
  • Html5选择图片并及时预览图片

    以往想要实现图片预览基本都是先传至服务器后等返回链接地址才能进行预览,使用Html5选择图片并及时预览图片的代码如下,使用起来更爽了。

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta charset="utf-8" />
    <meta name="author" content="EdieLei" />
    <title>HTML5 图片上传预览</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $('#img').change(function(){
            var file = this.files[0];    //选择上传的文件
            var r = new FileReader();
            r.readAsDataURL(file);    //Base64
            $(r).load(function(){
                $('div').html('');
            });
        });
    });
    </script>
    </head>
    <body>
    <h3>HTML5 图片上传预览</h3>
    <input id="img" type="file" accept="image/*" /><br />
    <div></div>
    </body>
    </html>
  • 相关阅读:
    案例分析
    202103226-1 编程作业
    阅读任务
    准备工作
    结对作业
    案列分析
    202103226-1 编程作业
    《构建之法》有感
    准备工作
    案例分析作业
  • 原文地址:https://www.cnblogs.com/huhangfei/p/5000790.html
Copyright © 2011-2022 走看看