zoukankan      html  css  js  c++  java
  • js实现图片上传实时显示

    在开发的时候经常遇到这样的需求,用户在上传图片的时候,想要看到自己上传的图片是否正确,这时候需要把用户上传的图片及时显示出来,然后等他点击上传的时候,程序再执行上传到服务器。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <input type="file" name="file" onchange="showPreview(this)" />
        <img id="portrait" src="" style="display:none;" />
    </body>
    </html>
    <script type="text/javascript">
        function showPreview(source) {
          var file = source.files[0];
          if(window.FileReader) {
              var fr = new FileReader();
              console.log(fr);
              var portrait = document.getElementById('portrait');
              fr.onloadend = function(e) {
                portrait.src = e.target.result;
              };
              fr.readAsDataURL(file);
              portrait.style.display = 'block';
          }
        }
    </script>    
  • 相关阅读:
    ActionBar认知
    CSS动画-多列
    CSS3动画效果
    GreenDao数据库框架
    Handler介绍
    AsyncTask介绍
    Android中IntentService的原理及使用
    English interview!
    第六章 结构
    结构体中定义函数指针
  • 原文地址:https://www.cnblogs.com/li-sir/p/7942044.html
Copyright © 2011-2022 走看看