Last active
March 26, 2018 13:12
-
-
Save gracefullight/18f101b376f9f7e06b9d04c1423f0f3a to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script type="text/javascript"> | |
var imageModule = (function () { | |
'use strict'; | |
var possible = window.File && window.FileReader && window.FormData; // html5 업로드를 지원하는지의 여부 | |
var apiPath = '/api/test.php'; // 업로드 서버 처리 경로 | |
var folder = '/upload/review/'; // 기본 이미지 업로드 폴더 | |
var $input; | |
var maxWidth = 600; | |
var maxHeight = 480; | |
var imageArray = []; // callback에 사용할 이미지 파일명 배열 | |
var callback; | |
/** | |
* [sendImageFile 이미지 비동기 업로드] | |
* @scope {[private]} | |
* @param {[string]} imageData [이미지 binary] | |
* @return {[function]} callback [업로드 후처리] | |
*/ | |
function sendImageFile(imageData) { | |
if (imageData) { | |
var formData = new FormData(); | |
formData.append('type', 'upload'); | |
formData.append('folder', folder); | |
formData.append('imageData', imageData); | |
$.ajax({ | |
type: 'post', | |
url: apiPath, | |
data: formData, | |
dataType: 'json', | |
contentType: false, // contentType header 제거 | |
processData: false, // Dom 객체를 전송하려면 false 처리해야함 | |
}) | |
.then(function (data) { | |
if (data.data) { | |
imageArray.push(data.data.file); // 이미지 배열에 저장 | |
$input.val(''); | |
if (callback) { | |
callback(imageArray); | |
} else { | |
console.log('callback function not initialized'); | |
} | |
} | |
}) | |
.catch(function (error) { | |
console.log("upload fail: ", error); | |
}); | |
} else { | |
console.log('image data is null'); | |
} | |
} | |
return { | |
/** | |
* [init 이미지 모듈 초기화] | |
* @param {[string]} fileId [변경할 input id] | |
* @param {[function]} callbackFunc [후처리] | |
* @param {[object]} settings [width, height, folder 설정가능] | |
*/ | |
init: function (fileId, callbackFunc, settings) { | |
if (possible) { | |
if (typeof settings === 'object') { | |
if (settings.width) { | |
maxWidth = settings.width; | |
} | |
if (settings.height) { | |
maxHeight = settings.height; | |
} | |
if (settings.folder) { | |
folder = settings.folder; | |
} | |
} | |
if ($.isFunction(callbackFunc)) { | |
callback = callbackFunc; | |
} else { | |
console.log('callback is not defined'); | |
} | |
var options = { | |
maxWidth: maxWidth, // resize width 값 | |
maxHeight: maxHeight, // resize height 값 | |
canvas: true, // 사진을 돌리려면 canvas 객체로 받아야함 | |
downsamplingRatio: 0.5 // 비율에 맞추어 크기 감소 | |
}; | |
$input = $('#' + fileId); | |
$input.on('change', function (e) { | |
e.preventDefault(); | |
e = e.originalEvent; | |
var target = e.dataTransfer || e.target; | |
var file = target && target.files && target.files[0]; | |
loadImage.parseMetaData(file, function (data) { // exif js를 사용해 이미지의 tag를 가져옴 | |
if (data.exif) { | |
options.orientation = data.exif.get('Orientation'); // 화면이 돌아간 비율을 지정 | |
} else { | |
if (options.orientation) { | |
options.orientation = null; | |
} | |
} | |
// 캔버스 이미지 리사이징 처리 후 서버호출 | |
loadImage(file, function (img) { | |
sendImageFile(img.toDataURL()); | |
}, options); | |
}); | |
}); | |
} else { | |
console.log('file upload is not supported'); | |
} | |
}, | |
/** | |
* [getFolder 업로드 경로 호출] | |
* @return {[string]} [경로] | |
*/ | |
getFolder: function () { | |
return folder; | |
}, | |
/** | |
* [delete 이미지 삭제] | |
* @param {[number]} idx [이미지 배열의 인덱스] | |
* @param {[function]} callbackFunc [delete 후처리] | |
*/ | |
delete: function (idx, callbackFunc) { | |
if (imageArray[idx]) { | |
$.ajax({ | |
url: apiPath, | |
type: 'post', | |
data: { | |
type: 'delete', | |
folder: folder, | |
filename: imageArray[idx], | |
}, | |
dataType: 'json' | |
}) | |
.then(function (data) { | |
console.log('file delete success'); | |
console.log(data); | |
if ($.isFunction(callbackFunc)) { | |
callbackFunc(data); | |
} | |
}) | |
.catch(function (error) { | |
console.log('server file delete failed'); | |
console.log(error); | |
}) | |
.done(function () { | |
imageArray.splice(idx, 1); | |
$input.val(''); | |
if (callback) { | |
callback(imageArray); | |
} else { | |
console.log('callback function not initialized'); | |
} | |
}); | |
} else { | |
console.log('delete index not defined'); | |
} | |
}, | |
clear: function () { | |
console.log('clear array'); | |
imageArray = []; | |
} | |
}; | |
}()); | |
$(function () { | |
imageModule.init('fileInput', function (data) { | |
var folder = imageModule.getFolder(); | |
var str = ''; | |
for (var i = 0, len = data.length; i < len; i++) { | |
str += '<img src="' + folder + data[i] + '" style="width:100%;height:100%;">'; | |
} | |
$('#area').html(str); | |
$('#fileData').val(JSON.stringify(data)); | |
}, {}); | |
// options, width height folder.. | |
// {width:500, height:300, folder:'/upload/board/'} | |
}); | |
// after insert into database | |
$('#area').empty(); | |
$('#fileData').val(''); | |
imageModule.clear(); | |
</script> | |
<input type="file" name="imageFile" id="fileInput" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment