예제 코드

/**
 * 로컬 이미지 압축 후 업로드 기능
 */
$("#imageInput").change(function(){
    var currentElement = $(this);
    lrz(this.files[0],{width: 1024,quality :0.7,fieldName:'imageFile'}).then(function(result) {

return uploadFile(currentElement.get(0) , result.formData);
    }).then(function(response) {
        // response => 업로드 성공 후 반환되는 JSON 데이터
        // TODO:: 처리 로직 구현
    }).catch(function(error) {
        console.log(error);
    });
});

/**
 * 원본 이미지 직접 업로드
 */
$("#imageInput").change(function(){
    uploadFile(this).then(function(response) {
        // response => 업로드 성공 후 반환되는 JSON 데이터
        // TODO:: 처리 로직 구현
    }).catch(function(error) {
        console.log(error);
    });
});


/**
 * 이미지 업로드 - 백엔드에서 정상적으로 이미지 처리 가능<input file="imageFile" name="imageFile" />
 * @param selector 파일 입력 필드 DOM 객체 [필수]
 * @param formData 파일 업로드용 FormData [선택]
 */
function uploadFile(selector , formData) {
    if(!formData) {
        formData = new FormData();
        formData.append("imageFile", $(selector)[0].files[0]);
    }

    var uploadUrl = "{:U('Wap/Public/ajaxSingleUpload')}";
    return new Promise(function(resolve,reject){
        $.ajax({
            url : uploadUrl,
            type : 'POST',
            data : formData,
            processData : false,
            contentType : false,
            dataType:"json",
            success : function(serverResponse) {
                resolve(serverResponse);
            },
            error : function(serverResponse) {
                reject(serverResponse);
            }
        });
    });
}</em>

매개변수 설명:

매개변수
lrz(file, [options]);
file input:file로 얻은 파일 또는 직접 이미지 경로
[options] 이 매개변수는 생략 가능
width {Number} 이미지의 최대 너비, 기본값은 원본 너비이며 높이를 지정하지 않으면 너비에 맞게 조정됨
height {Number} 위와 동일
quality {Number} 이미지 압축 품질, 값 범위 0 - 1, 기본값 0.7
fieldName {String} 백엔드에서 받을 필드 이름, 기본값: file

반환 결과

반환값은 promise 객체

then(rst)

rst.formData 백엔드에서 처리할 수 있는 데이터
rst.file 압축된 파일 객체 (기본값으로 rst.formData에 이미 포함됨), 압축률이 너무 낮은 경우 원본 파일 객체가 될 수 있음
rst.fileLen 생성된 이미지 크기, 백엔드는 이 값으로 전송이 완전한지 확인 가능
rst.base64 생성된 이미지의 base64, 백엔드는 이 문자열을 이미지로 처리하거나 img.src = base64로 직접 사용 가능
rst.base64Len 생성된 base64의 크기, 백엔드는 이 값으로 전송이 완전한지 확인 가능 (base64 업로드 방식 사용 시)
rst.origin 원본 파일 객체로, 원본 파일의 크기, 날짜 등의 정보가 저장됨
catch(err)

always()

리소스 다운로드 주소:https://github.com/think2011/localResizeIMG

하나의 파일만 참조하면 됨

<script src="./dist/lrz.bundle.js"></script>

보충 자료

FormData 객체 매개변수 및 메소드 정보: https://developer.mozilla.org/en-US/docs/Web/API/FormData

예제:FormData.get('key');//key 값으로 해당 데이터 가져오기