[jquery] file upload 예제

html에서는 form안에 form을 넣을 수 없다. 

(정확히 말하면 chrom 기준)

html 코드에 div를 사용하는 것이 좋다.

<div class="form-group">

<label for="objectUrl" class="col-xs-2 control-label"><span class="fa fa-fw fa-bars"></span>이미지/동영상 업로드</label>

<div class="col-xs-10">

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

   <label><input type="file" name="file" id="file" accept="image/*,video/*"/></label>

   <button type="button" class="btn btn-danger btn-upload">file upload</button> 

</div>

</div>

스크립트 코드는 다음과 같다.

<script>

$(document).ready(function() {

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

if (confirm('Want to upload a image or a video file?')) {

var data = new FormData();

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

console.log(data);

$.ajax({

            type: "POST",

            enctype: 'multipart/form-data',

            url: "/actiontag_guide/upload/",

            data: data,

            processData: false,

            contentType: false,

            cache: false,

            timeout: 600000,

            success: function (result) {

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

                $('#objectUrl').attr("disabled", true) 

                $('#objectUrl').val(result.data.url)

            },

            error: function (e) {

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

            }

        });

}

     });