前端實現圖片上傳預覽

時間 2019-11-24

標籤前端實現圖片上傳預覽简体版

原文原文鏈接

講乾貨，不囉嗦，開發中有時會遇到上傳圖片並即時生成圖片預覽的需求，如下爲具體實現，主要是應用FileReader對象，有須要的請拿走。html

具體實現：jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片上傳預覽</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<!--    設置input的type和accept，固然也可設置multiple容許多文件上傳，這裏不作設置-->
    <input type="file" accept="image/*" onchange="showImg(this)" />
    <h2>如下爲預覽效果：</h2>
    <img src="" alt="" id="img">
    <script>
        function showImg(obj) {
            var file=$(obj)[0].files[0];    //獲取文件信息
            var imgdata='';
            if(file)
            {
                var reader=new FileReader();  //調用FileReader
                reader.readAsDataURL(file); //將文件讀取爲 DataURL(base64)
                reader.onload=function(evt){   //讀取操做完成時觸發。
                    $("#img").attr('src',evt.target.result)  //將img標籤的src綁定爲DataURL
                };
            }
            else{
                alert("上傳失敗");
            }
        }
    </script>
    <style>
        img{
            width: 400px;
        }
    </style>
</body>
</html>