溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

HTML5如何實(shí)現(xiàn)圖片預(yù)覽

發(fā)布時(shí)間：2021-09-29 16:58:29 來(lái)源：億速云 閱讀：174 作者：小新 欄目：web開(kāi)發(fā)

這篇文章主要介紹了HTML5如何實(shí)現(xiàn)圖片預(yù)覽，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

HTML5圖片預(yù)覽需要用到兩種方法

    1.URL
    2.FileReader
直接上代碼


<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>html5 圖片上傳預(yù)覽</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" ></div>
</form>
</body>
</html>

其中URL.revokeObjectURL方法Opera不支持，F(xiàn)ileReader除IE9及以下不支持，其它瀏覽器都支持。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“HTML5如何實(shí)現(xiàn)圖片預(yù)覽”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手