Input type File 다중 파일 선택 & Ajax 전송

 

 

input type file 테그 속성중에 multiple이라는 속성이 있다.

해당 속성을 선택하면 파일이 여러개 선택 되는데, 해당 데이터가 배열로 리턴된다.

<input type='file' id='file' multiple /> <!-- 멀티플 속성을 주어야 다중선택이 가능 해진다 -->

<script language = "JavaScript">
var formArray = {};  //파일을 담을 객체 key, value 형태로 파일을 담든다.
var fileList = new Object();

$('#file').change(function(evt) {
    fileList = $(this)[0].files;  //파일 대상이 리스트 형태로 넘어온다.
    for(var i=0;i < fileList.length;i++){
        var file = fileList[i];
        const formData = new FormData();
        formData.append('유니크한아이디', file);  //파일을 더해준다.
        //만약 여기서 유니크한이이디를 사용하여 테그(노드)를 만든다면
        //각각 파일에 대해 프로그래싱이 가능하다.
        $('프로그래스 상태를 나타낼 테그').append('유니크한 아이디를 가진 객체');
    }
});
</script>

 

해당 내용을 한번에 던져도 상관없지만 만약 프로그래스를 구현하려면 각각 전송하는 것을 권장한다.

function sendData(){
    $.each(formArray, function (uniquId, DATA) {  
        //앞서 유니크한 아이디로 프로그래스 아이디를 매칭하면 파일마다 각각
        //전송상태 효과를 줄 수 있다.
        $.ajax({
            url: '주소',
            xhr: function() {
                var myXhr = $.ajaxSettings.xhr();
                //PROGRESS_KEY 값에 앞서 지정한 유니크한아이디를 넣어주자.
                myXhr.upload.PROGRESS_KEY = uniquId;  
                console.log(myXhr.upload);
                if(myXhr.upload){
                    myXhr.upload.addEventListener('progress',progress, false);
                }
                return myXhr;
            },
            processData: false,
            contentType: false,
            data: DATA,
            type: 'POST'
            success: function(result){
                console.log(result);
            },
            error : function(e){
                console.log(e);
            }
        });			
    });
}

function progress(e){   //콜백 프로그래스용 함수
    var target = e.target.PROGRESS_KEY;   //여기서 해당 키값을 가져와서
    if(e.lengthComputable){  //완료될 때 까지 프로그래싱을 줄 수 있다. 
        var max = e.total;
        var current = e.loaded;
        var Percentage = Math.floor((current * 100)/max);

        $('#'+target).text(Percentage+"%");

        if(Percentage >= 100){
            $('#'+target).text('100%');
        }
    }  
}

해당 기능을 응용하면 Drag and drop에서도 동일하게 할 수 있다.