萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> Html5 >> HTML5圖片預覽的方法介紹

HTML5圖片預覽的方法介紹

下面我們給大家介紹一下HTML5圖片預覽的方法吧!希望大家可以在這裡學習!

HTML5圖片預覽需要用到兩種方法

    1.URL

    2.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>

copyright © 萬盛學電腦網 all rights reserved