zoukankan      html  css  js  c++  java
  • JS实现上传图片实时预览

    在进行项目开发时,对图片上传功能一直比较模糊,上传并预览图片效果难以实现。

    经过上网搜索资料,发现网上流传出来的多图上传功能代码不全,后台接收文件只能收到最后添加的一张图片。

    以下代码实现,单张图片上传并本地实时预览的效果,经测试,兼容性还不错。

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
    #preview,
    .img,
    img {
    200px;
    height: 200px;
    }

    #preview {
    border: 1px solid #000;
    }
    </style>
    </head>

    <body>
    <div id="preview"></div>
    <input type="file" onchange="preview(this)" />
    <script type="text/javascript">
    function preview(file) {
    var prevDiv = document.getElementById('preview');
    if (file.files && file.files[0]) {
    var reader = new FileReader();
    reader.onload = function(evt) {
    prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
    }
    reader.readAsDataURL(file.files[0]);
    } else {
    prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
    }
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    Mysql高手系列
    Mysql高手系列
    Mysql高手系列
    Mysql高手系列
    Mysql高手系列
    Mysql高手系列
    Mysql高手系列
    Mysql高手系列
    Mysql高手系列
    Mysql高手系列
  • 原文地址:https://www.cnblogs.com/xiongdahei/p/6813523.html
Copyright © 2011-2022 走看看