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>

  • 相关阅读:
    TreeView 读取 xml 显示节点
    网上流传的数据操作类
    文件上传, 打开, 删除操作
    Reflector8.5 .net反编译工具 破解教程
    asp.net c# 打开新页面或页面跳转
    UGUI 要点总结
    EventSystem
    拖拽事件
    Unity Transform
    鼠标跟随(坐标转换)
  • 原文地址:https://www.cnblogs.com/xiongdahei/p/6813523.html
Copyright © 2011-2022 走看看