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及以下不支持,其它浏览器都支持。

  • 相关阅读:
    shell 编写简单的整数计算器
    信号控制
    MySQL-索引及优化整理
    Java面试-Java容器有哪些
    C语言宏定义
    值类型与引用类型的区别
    C++虚函数简介
    DNS-域名解析
    扇区,簇,块区分
    Java合并两个数组为一个新数组
  • 原文地址:https://www.cnblogs.com/axl234/p/3767454.html
Copyright © 2011-2022 走看看