前端圖片上傳預覽

本文轉載自查看原文 2017-11-03 15:16 1724 css/ jq/ html

前端圖片上傳預覽

方法一：（jq）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input-img</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <style>
        img {
            width: 100px;
            height: auto;
        }

    </style>
</head>
<body>
    <div class="imgBox"></div>
    <!-- accept： 規定文件類型
    multiple: 允許多文件上傳 -->
    <input type="file" name="file" id="file" class="file" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple>
</body>
    <script>
        $(function () {
            $('#file').change(function () {
                var imgArr = []; //獲取的圖片地址
                var fileList = $(this)[0].files;   //或獲取的圖片文件
                console.log(fileList);
                var Length = fileList.length;
                for ( var i = 0; i < Length; i++ ) {
                    var imgUrl = window.URL.createObjectURL(fileList[i]); //獲取圖片地址
                    imgArr.push(imgUrl);
                    console.log(imgArr);
                    var $img = $("<img class='img'>");
                    $('.imgBox').append($img);
                    $img.attr('src', imgArr[i]);
                }
            });
        })
    </script>
</html>

效果圖：

方法二:

<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <input type="file"><br>
        <img src="" height="200" alt="Image preview area..." title="preview-img">
        <script>
            var fileInput = document.querySelector('input[type=file]'),
                previewImg = document.querySelector('img');
            fileInput.addEventListener('change', function() {
                var file = this.files[0];
                var reader = new FileReader();
                // 監聽reader對象的的onload事件，當圖片加載完成時，把base64編碼賦值給預覽圖片
                reader.addEventListener("load", function() {
                    previewImg.src = reader.result;
                }, false);
                // 調用reader.readAsDataURL()方法，把圖片轉成base64
                reader.readAsDataURL(file);
            }, false);
        </script>
    </body>
</html>

免責聲明！

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

猜您在找 前端實現圖片上傳預覽 H5上傳圖片前端預覽顯示 js前端實現多圖圖片上傳預覽 web前端上傳圖片+預覽【前端預覽】實現多張上傳圖片預覽查看前端實現圖片上傳預覽並轉換base64 圖片上傳的“預覽”與“顯示進度條”的前端實現圖片上傳(前端顯示預覽，后端php接收) 前端實現input[type='file']上傳圖片預覽效果 js上傳和預覽圖片