zoukankan      html  css  js  c++  java
  • h5的图片预览

    h5的图片预览是个好东西,不需要保存到后台就能预览图片

    代码也很短

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>图片上传预览</title>
    <script type="text/javascript">
        function imgPreview(fileDom){
            //判断是否支持FileReader
            if (window.FileReader) {
                var reader = new FileReader();
            } else {
                alert("您的设备不支持图片预览功能,如需该功能请升级您的设备!");
            }
    
            //获取文件
            var file = fileDom.files[0];
            var imageType = /^image//;
            //是否是图片
            if (!imageType.test(file.type)) {
                alert("请选择图片!");
                return;
            }
            //读取完成
            reader.onload = function(e) {
                //获取图片dom
                var img = document.getElementById("preview");
                //图片路径设置为读取的图片
                img.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    </script>
    </head>
    <body>
        <img id="preview" />
        <br />
        <input type="file" name="file" onchange="imgPreview(this)" />
    </body>
    </html>
    
  • 相关阅读:
    flask 知识积累
    python中下划线
    pipenv知识积累
    shell知识积累
    AttributeError: type object 'testClass' has no attribute 'testMothod'
    python知识积累
    补全爬取的url
    linux 的基本命令
    Python里的拷贝
    关于第一次java课的感想
  • 原文地址:https://www.cnblogs.com/anxiaoyu/p/6866626.html
Copyright © 2011-2022 走看看