FileReader 이미지 미리 보기

    
    
    




    username: 

    password: 

    file: 

    





    "user strict";

    $(function () {
        if (typeof FileReader === 'undefined') {
            alert(' ，  FileReader');
        }

        //  let 
        let fileList = [];
        const fileCatcher = $('#example');
        const files = $("#files");
        const fileListDisplay = $('#file-list-display');
        //  
        const uploadPreview = $('#uploadPreview');

        fileCatcher.on("submit", function (event) {
            event.preventDefault();
            // 
            let formData = new FormData(fileCatcher[0]);

            // formData 
            fileList.forEach(function (file) {
                if (validateType(file)) {
                    formData.append('files', file, file.name);
                }
            })
            const request = new XMLHttpRequest();
            request.open("POST", "upload");
            request.send(formData);
        });

        files.on("change", function (event) {
            for (var i = 0; i < files[0].files.length; i++) {
                fileList.push(files[0].files[i]);
            }
            let content = ''
            let imgPreview = ''
            fileList.forEach(function (file, index) {

                if (validateType(file)) {
                    content += '<p>' + (index + 1) + ":" + file.name + '</p>';
                    const fileReader = new FileReader();
                    fileReader.readAsDataURL(file)
                    fileReader.onload = function (e) {
                        const imgFile = e.target.result
                        imgPreview += '<img src="' + imgFile + '" title="' + file.name + '" width="400px"/>'
                        // console.log(imgPreview)
                        uploadPreview.empty()
                        uploadPreview.append(imgPreview)
                    }
                }
            })
            fileListDisplay.html(content)
        });
    })

    //  
    function validateType(file) {
        if (!/image\/\w+/.test(file.type)) {
            alert(" ");
            return false;
        }
        return true;
    }