HTML5图片预览

两种方式实现

URL

FileReader

<!DOCTYPE HTML>
<html>
    <head>
    <meta charset="utf-8">
    <title>html5 图片上传预览</title>
    <style>
        #preview {
            width: 300px;
            height: 300px;
            overflow: hidden;
        }
        #preview img {
            width: 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及以下不支持，其它浏览器都支持。

https://developer.mozilla.org/en-US/docs/DOM/window.URL.revokeObjectURL

相关阅读:
巧用加密方法保障电子邮件系统安全狼人:
网管员注意：保障邮件安全的七条措施狼人:
全面剖析DNS 0DAY攻击、威胁以及防治狼人:
简述：电子邮件安全发展狼人:
IE漏洞致数百万用户中招快用瑞星卡卡打补丁狼人:
警惕可执行文件：三类危险TXT类型文件狼人:
安全使用电子邮件十三法狼人:
提高IE和Email的安全性的四步骤狼人:
了解电子邮件加密保证隐私内容安全狼人:
防不胜防了解DNS缓存中毒攻击原理狼人:

原文地址：https://www.cnblogs.com/lxl57610/p/7455618.html