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

  • 相关阅读:
    Blank page instead of the SharePoint Central Administration site
    BizTalk 2010 BAM Configure
    Use ODBA with Visio 2007
    Handling SOAP Exceptions in BizTalk Orchestrations
    BizTalk与WebMethods之间的EDI交换
    Append messages in BizTalk
    FTP protocol commands
    Using Dynamic Maps in BizTalk(From CodeProject)
    Synchronous To Asynchronous Flows Without An Orchestration的简单实现
    WSE3 and "Action for ultimate recipient is required but not present in the message."
  • 原文地址:https://www.cnblogs.com/axl234/p/3767454.html
Copyright © 2011-2022 走看看