js判斷上傳圖片格式，並預覽

時間 2019-11-25

原文原文鏈接

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>img view</title>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
</head>

<body>
    <h2>文件上傳</h2>
    <!--dom結構部分-->
    <div id="image-holder">
        <!--用來存放item-->
        <input id="file" type="file" accept="image/gif, image/jpeg, image/png">
    </div>

    <script type="text/javascript">
        $("#file").on('change', function() {

            var countFiles = $(this)[0].files.length;
            var imgPath = $(this)[0].value;
            var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
            var image_holder = $("#image-holder");
            image_holder.empty();

            if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
                if (typeof(FileReader) != "undefined") {

                    //loop for each file selected for uploaded.
                    for (var i = 0; i < countFiles; i++) {

                        var reader = new FileReader();
                        reader.onload = function(e) {
                            $("<img />", {
                                "src": e.target.result,
                                "class": "thumb-image"
                            }).appendTo(image_holder);
                        }

                        image_holder.show();
                        reader.readAsDataURL($(this)[0].files[i]);
                    }

                } else {
                    alert("This browser does not support FileReader.");
                }
            } else {
                alert("Pls select only images");
            }
        });

    </script>
</body>

</html>