Develop/Javascript

Ajax를 이용한 파일업로드 및 param송신예제

RianShin 2023. 2. 28. 16:20
728x90
반응형
SMALL
<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<input type="file" name="upload_file" multiple />
<input type="button" id="btn_upload" value="submit" onclick="test()" />

</html>
<script>
    function test() {
        console.log(1111)
        var formData = new FormData();
        var inputFile = $('input[name="upload_file"]');
        var files = inputFile[0].files;
        //같이 보낼 param
        formData.append('key1', 'value1')
        formData.append('key2', 'value2')

        for (var i = 0; i < files.length; i++) {
            formData.append('uploadFiles', files[i]);
        }

        $.ajax({
            contentType: false,
            processData: false,
            data: formData,
            url: 'http://192.168.10.145:28082/ui-dev/admin/api/admin/uploadFile',
            type: 'POST',
            error: function(error) {
                alert("전송 에러 : " + error.toString());
            },
            success: function(data) {
                result = data;
                alert("정상적으로 전송되었습니다.")
            }

        });
    }
</script>

 

728x90
반응형
LIST
저작자표시 비영리 (새창열림)