[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);
}
});
}
});