[Javascript] 파일 업로드

화면 view

<input
     type="file"
     id="fileUpload"
     data-ipss-upload
     data-ipss-upload-callback="callback"
     data-ipss-upload-limit="1024"
     data-ipss-upload-dimension="600x600"
     accept=".jpg, .png"
>

     

js 파일

 

$(document).ready(function () {
    $('input[type=file][data-ipss-upload]').on('change', function (e) {
        var $this = $(this);

        var file = this.files[0];
        if (!file) {
            return;
        }

        var accept = $this.attr('accept');
        var isProductImage = $this.attr('data-ipss-upload-product-image');
        var limit = $this.attr('data-ipss-upload-limit');
        var dimension = $this.attr('data-ipss-upload-dimension');
        var maxDimension = $this.attr('data-ipss-upload-max-dimension');
        var callback = $this.attr('data-ipss-upload-callback');

        // 확장자
        if (accept) {
            accept = accept.replace(/ /g, '');
            var acceptList = accept.split(/,/);
            var isAccept = false;
            acceptList.forEach(function (ext) {
                if (file.name.toLowerCase().lastIndexOf(ext.toLowerCase()) > 0) {
                    isAccept = true;
                }
            });
            if (!isAccept) {
                alert('첨부할 수 없는 확장자 입니다.');
                $(this).val('');
                return false;
            }
        }

        // 상품이미지 여부
        isProductImage = (isProductImage && isProductImage === 'on');

        // 파일 사이즈
        if (limit) {
            if (file.size > limit * 1024) {
                alert('첨부할 수 있는 용량은 최대' + limit + 'kb 입니다.');
                $(this).val('');
                return false;
            }
        }

        // 최소사이즈
        var width;
        var height;
        var matchDimension = dimension && dimension.match(/^(\d{1,})x(\d{1,})$/);
        if (matchDimension) {
            width = matchDimension[1];
            height = matchDimension[2];
        }

        //최대사이즈
        var maxWidth;
        var maxHeight;
        var matchMaxDimension = maxDimension && maxDimension.match(/^(\d{1,})x(\d{1,})$/);
        if (matchMaxDimension) {
            maxWidth = matchMaxDimension[1];
            maxHeight = matchMaxDimension[2];
        }

        var formData = new FormData();
        formData.append('file', file);
        accept && formData.append('accept', accept);
        isProductImage && formData.append('isProductImage', isProductImage);
        limit && formData.append('limit', limit * 1024);
        width && formData.append('width', width);
        height && formData.append('height', height);
        maxWidth && formData.append('maxWidth', maxWidth);
        maxHeight && formData.append('maxHeight', maxHeight);

        $.ajax({
            url: 'url 입력',
            type: 'post',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function(response) {
                if (!!callback) {
                    --성공
                }
            },
            error: function(jqXHR) {
                 alert('실패했습니다.');
            }
        })
    })
});

 

function callback(data) {

    //success 했을때 action을 추가

}