• HTML5上传图片预览功能


    HTML5上传图片预览功能

    HTML代码如下:

    <!-- 
    date: 2018-04-27 14:41:35
    author: 王召波
    descride: HTML5上传图片预览功能
    -->
    <!DOCTYPE html>
    <html>
        <head>
        <meta charset="utf-8">
        <title>HTML5上传图片预览功能</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
        <style type="text/css">
            #feedback{
                min-height: 200px;
                text-align: center;
                border: 1px solid silver;
                border-radius: 3px;
            }
            #feedback img{
                margin:3px 10px;
                border: 1px solid silver;
                border-radius:3px;
                padding: 6px; 
                width: 35%;
                height: 85%;
            }
            #feedback p{
                font-family: "微软雅黑";
                line-height: 120px;
                color: #ccc;
            }
            .file {
                position: relative;
                display: inline-block;
                border: 1px solid #1ab294;
                border-radius: 4px;
                padding: 8px 16px;
                overflow: hidden;
                color: #fff;
                text-decoration: none;
                text-indent: 0;
                line-height: 20px;
                color: #1ab294;
                }
                
            .file input {
                position: absolute;
                font-size: 100px;
                right: 0;
                top: 0;
                opacity: 0;
            }
            .box{
                margin-top: 10px;
                text-align: center;
            }
            .box a{
                margin-left: 10px;
            }
        </style>
    </head>
    <body> 
        <!-- 响应返回数据容器 -->
        <div id="feedback">
        </div>
        <div class="box">
            <a href="javascript:;" class="file">选择图片
                <input type="file" id="inputfile" name="" class="photo">
            </a>
            <a href="javascript:;" class="file close">重新选择
                <input type="buttom" class="photo">
            </a>
        </div>
    <script type="text/javascript">
    $(function () {
        $("#inputfile").change(function (e) {
            var imgURL = '';
            var file = e.target.files[0] || e.dataTransfer.files[0];
            if (file) {
                try{
                    try{
                        imgURL =  file.getAsDataURL(); 
                    }catch(e){
                        imgURL = window.URL.createObjectURL(file);
                    }
                }catch(e){
                    var reader = new FileReader();
                    reader.onload = function () {
                        imgURL = this.result;
                    }
                    reader.readAsDataURL(file);
                }
                $("#feedback").append('<img src="'+imgURL+'">');;
            }
        });
    })
    </script>
    </body>
    </html>

    效果图:

  • 相关阅读:
    HashMap 和 Hashtable 的区别
    使用 final 关键字修饰一个变量时,是引用不能变,还是引用的对象不能变?
    short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
    io--文件内容的复制
    heap与stack的区别
    序列化与反序列化
    实现反转的方法(reverse)
    final, finally, finalize 的区别
    request.getSession()、reqeust.getSession(false)和request.getSession(true)
    如何优化网页的加载速度
  • 原文地址:https://www.cnblogs.com/wangzhaobo/p/8962373.html
走看看 - 开发者的网上家园