[javascript] jquery로 file upload 하는 예제

Jquery에서 file upload하는 예제이다. 

html 코드

<div class="x-10">

 <input type="text" class="form-control" id="objectUrl" name="objectUrl" value="${actionTagGuide.objectUrl!}" ><br/>

    <label><input type="file" name="file" id="file"/></label>

    <button type="button" class="btn btn-danger btn-upload">파일 업로드</button> 

</div>

자바스크립트는 다음과 같다. 

$(document).ready(function() {

var today = (new Date()).yyyymmdd();

$('.btn-upload').on('click', function (){

if (confirm('Could you upload a file?')) {

var data = new FormData();

data.append("file", $('#file').prop('files')[0]);

console.log(data);

$.ajax({

            type: "POST",

            enctype: 'multipart/form-data',

            url: "/upload/"+today+"/",

            data: data,

            processData: false,

            contentType: false,

            cache: false,

            timeout: 600000,

            success: function (data) {

                $("#objectUrl").text(data);

                console.log("SUCCESS : ", data);

            },

            error: function (e) {

                $("#objectUrl").text(e.responseText);

                console.log("ERROR : ", e);

            }

        });

}

     });

});