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

    两种方式实现

    • URL
    • FileReader

    <!DOCTYPE HTML>
    <html>
        <head>
        <meta charset="utf-8">
        <title>html5 图片上传预览</title>
        <style>
            #preview {
                 300px;
                height: 300px;
                overflow: hidden;
            }
            #preview img {
                 100%;
                height: 100%;
            }
        </style>
        <script src="../jquery/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            function preview1(file) {
                var img = new Image(), url = img.src = URL.createObjectURL(file)
                var $img = $(img)
                img.onload = function() {
                    URL.revokeObjectURL(url)
                    $('#preview').empty().append($img)
                }
            }
            function preview2(file) {
                var reader = new FileReader()
                reader.onload = function(e) {
                    var $img = $('<img>').attr("src", e.target.result)
                    $('#preview').empty().append($img)
                }
                reader.readAsDataURL(file)
            }
             
            $(function() {
                $('[type=file]').change(function(e) {
                    var file = e.target.files[0]
                    preview1(file)
                })
            })
        </script>
    </head>
    <body>
    <form enctype="multipart/form-data" action="" method="post">
        <input type="file" name="imageUpload"/>
        <div id="preview" style=" 300px;height:300px;border:1px solid gray;"></div>
    </form>
    </body>
    </html>

    URL.revokeObjectURL方法Opera不支持,FileReader除IE9及以下不支持,其它浏览器都支持。

  • 相关阅读:
    log4j(七)——log4j.xml简单配置样例说明
    log4j(六)——log4j.properties简单配置样例说明
    三元运算符注意事项
    单精度浮点数操作
    反转链表算法Java实现
    VBS计时器2
    肖申克的救赎影评
    计算机中K到底是1000还是1024?
    二进制补码除法——计算机底层整数除法模拟之Java实现
    VBS计时器
  • 原文地址:https://www.cnblogs.com/axl234/p/3767454.html
Copyright © 2011-2022 走看看