H5實現本地預覽圖片

本文轉載自查看原文 2016-12-07 20:53 5607 Web/ 原創/ H5

我們使用H5可以很容易的實現圖片上傳前對其進行預覽的功能

Html代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UploadFile</title>
</head>
<body>
   <div>
        <img src="" id="img" style="width:200px;height:300px;" />
    </div>
    <input type="file" id="file" />
</body>
</html>

實現預覽功能的js代碼如下：

<script type="text/javascript">
    window.onload = function () {
        var fileTag = document.getElementById('file');
        fileTag.onchange = function () {
            var file = fileTag.files[0];
            var fileReader = new FileReader();
            fileReader.onloadend = function () {
                if (fileReader.readyState == fileReader.DONE) {
                    document.getElementById('img').setAttribute('src', fileReader.result);
                }
            };
            fileReader.readAsDataURL(file);
        };
    };
</script>


預覽效果如下：

最后注意一點，H5實現圖片預覽只能使用原生JS進行DOM元素的操作，若使用jQuery則無法實現該效果。

參考文章：

H5中的File對象
 H5中的FileList對象
 H5中的FileReader對象
 在web應用中使用文件

版權聲明

本文為作者原創，版權歸作者雪飛鴻所有。轉載必須保留文章的完整性，且在頁面明顯位置處標明原文鏈接。

如有問題，請發送郵件和作者聯系。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 H5圖片預覽功能 h5實現本地圖片或文件的上傳關於H5里的API，上傳圖片預覽功能 createObjectURL方法實現本地圖片預覽 h5 實現調用系統拍照或者選擇照片並預覽 h5實現圖片的裁剪（多頁面）移動端H5選擇本地圖片在手機上預覽自己的本地h5頁面 FileReader本地預覽圖片移動端本地 H5 秒開方案探索與實現