parent
232fb948b6
commit
4daeea3ce6
@ -1,300 +0,0 @@
|
|||||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
|
|
||||||
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
|
|
||||||
<c:set var="prefixName" scope="request">QR code reading</c:set>
|
|
||||||
|
|
||||||
<div class="wrapper" style="padding-top:2em">
|
|
||||||
|
|
||||||
<div class="container" id="demo-content">
|
|
||||||
<div id="divBarcode">
|
|
||||||
<label>바코드 스캔</label>
|
|
||||||
<input type="text" id="barcodeStr" name="barcodeStr" style="width: 390px;" minlength="200" >
|
|
||||||
<button id="btnBarcode" class="btn btn-primary">조회</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3 class="title">바코드(이미지) scan</h3>
|
|
||||||
|
|
||||||
|
|
||||||
<div id="divImage">
|
|
||||||
<div>
|
|
||||||
<!-- <img id="img" src="../../images/qr_code.png" style="width:300px; height: 200px; border: 1px solid gray"></img>-->
|
|
||||||
<div id="img" style="width:300px; height: 200px; border: 1px solid gray"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
<textarea id="result2" style="width: 500px; height: 200px"></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="footer">
|
|
||||||
<section class="container">
|
|
||||||
<p></p>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
document.querySelector("#barcodeStr").addEventListener('change', function () {
|
|
||||||
document.getElementById('result2').value = '';
|
|
||||||
console.log('change');
|
|
||||||
submitBarcodeScan();
|
|
||||||
}, {passive: true});
|
|
||||||
|
|
||||||
document.querySelector("#btnBarcode").addEventListener('click', function () {
|
|
||||||
console.log('click');
|
|
||||||
if(document.querySelector("#barcodeStr").value === ''){
|
|
||||||
alert('바코드를 읽어 주세요.')
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
document.getElementById('result2').value = '';
|
|
||||||
submitBarcodeScan();
|
|
||||||
}, {passive: true});
|
|
||||||
|
|
||||||
$(document).ready(function () {
|
|
||||||
|
|
||||||
const sec9 = document.querySelector('#divImage');
|
|
||||||
const uploadBox = sec9.querySelector('#img');
|
|
||||||
|
|
||||||
/* 박스 안에 Drag 들어왔을 때 */
|
|
||||||
uploadBox.addEventListener('dragenter', function (e) {
|
|
||||||
console.log('dragenter');
|
|
||||||
});
|
|
||||||
|
|
||||||
/* 박스 안에 Drag를 하고 있을 때 */
|
|
||||||
uploadBox.addEventListener('dragover', function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
console.log('dragover');
|
|
||||||
|
|
||||||
const vaild = e.dataTransfer.types.indexOf('Files') >= 0;
|
|
||||||
|
|
||||||
if (!vaild) {
|
|
||||||
this.style.backgroundColor = 'red';
|
|
||||||
} else {
|
|
||||||
this.style.backgroundColor = 'green';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/* 박스 밖으로 Drag가 나갈 때 */
|
|
||||||
uploadBox.addEventListener('dragleave', function (e) {
|
|
||||||
console.log('dragleave');
|
|
||||||
|
|
||||||
this.style.backgroundColor = 'white';
|
|
||||||
});
|
|
||||||
|
|
||||||
/* 박스 안에서 Drag를 Drop했을 때 */
|
|
||||||
uploadBox.addEventListener('drop', function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
console.log('drop');
|
|
||||||
this.style.backgroundColor = 'white';
|
|
||||||
|
|
||||||
console.dir(e.dataTransfer);
|
|
||||||
|
|
||||||
//유효성 Check
|
|
||||||
if (!isValid(e.dataTransfer)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = e.dataTransfer.files;
|
|
||||||
console.dir(data);
|
|
||||||
//
|
|
||||||
const formData = new FormData();
|
|
||||||
for (let i = 0; i < data.length; i++) {
|
|
||||||
formData.append('uploadFiles', data[i]);
|
|
||||||
}
|
|
||||||
document.getElementById('result2').value = ''
|
|
||||||
|
|
||||||
requestSubmit({
|
|
||||||
url: '<c:url value="${apiHost}/api/biz/nims/v1/getProductInfoByQrcodeImg" />',
|
|
||||||
method: 'POST',
|
|
||||||
data: formData,
|
|
||||||
progress: () => {
|
|
||||||
|
|
||||||
},
|
|
||||||
loadend: (res) => {
|
|
||||||
const rslt = JSON.parse(res)
|
|
||||||
if (rslt.success) {
|
|
||||||
//console.log(data[0].qrcode)
|
|
||||||
document.getElementById('result2').value = JSON.stringify(rslt.data, null, 4)
|
|
||||||
return true;
|
|
||||||
}else{
|
|
||||||
alert(rslt.code + ":" + rslt.message);
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
error: (e) => {
|
|
||||||
console.error(e)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
function submitBarcodeScan(){
|
|
||||||
const data = {
|
|
||||||
barcodeStr: document.querySelector("#barcodeStr").value
|
|
||||||
};
|
|
||||||
const url = '<c:url value="${apiHost}/api/biz/nims/v1/getPrdMnfSeqInfoOfBarcode" />';
|
|
||||||
|
|
||||||
fetch(url, {
|
|
||||||
method: 'POST',
|
|
||||||
body: JSON.stringify(data)
|
|
||||||
})
|
|
||||||
.then(response => {
|
|
||||||
if (!response.ok) {
|
|
||||||
return response.json().then(error => { throw error; });
|
|
||||||
}
|
|
||||||
return response.json();
|
|
||||||
})
|
|
||||||
.then(res => {
|
|
||||||
console.log(res);
|
|
||||||
console.log(res.data);
|
|
||||||
if (!res.success) {
|
|
||||||
alert(res.code + ":" + res.message);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
document.getElementById('result2').value = JSON.stringify(res.data, null, 4)
|
|
||||||
return true;
|
|
||||||
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.log(error);
|
|
||||||
if (error && typeof error === 'object') {
|
|
||||||
console.log(error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function isValid(data) {
|
|
||||||
|
|
||||||
//파일인지 유효성 검사
|
|
||||||
if (data.types.indexOf('Files') < 0) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
const files = data.files
|
|
||||||
//파일의 개수는 1개씩만 가능하도록 유효성 검사
|
|
||||||
if (files.length > 1) {
|
|
||||||
alert('파일은 하나씩 전송이 가능합니다.');
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
//이미지인지 유효성 검사
|
|
||||||
let isStop = false;
|
|
||||||
let fileInfos = [];
|
|
||||||
for (let i = 0; i < files.length; i++) {
|
|
||||||
if (files[i].type.indexOf('image') < 0) {
|
|
||||||
isStop = true;
|
|
||||||
alert('이미지 파일만 업로드 가능합니다.');
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
//파일의 사이즈는 1MB 미만
|
|
||||||
if (files[i].size >= 1024 * 1024 * 2) {
|
|
||||||
isStop = true;
|
|
||||||
alert('2MB 이상인 파일은 업로드할 수 없습니다.');
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
fileInfos[i] = {
|
|
||||||
fileName: files[i].name,
|
|
||||||
size: files[i].size
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isStop) {
|
|
||||||
fileInfos = null;
|
|
||||||
return isStop;
|
|
||||||
}
|
|
||||||
alert(JSON.stringify(fileInfos, null, 4));
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* <pre>
|
|
||||||
* file upload 요청
|
|
||||||
* obj = {
|
|
||||||
* method: string
|
|
||||||
* url: string
|
|
||||||
* data: FormData
|
|
||||||
* }
|
|
||||||
*
|
|
||||||
* @param obj
|
|
||||||
* </pre>
|
|
||||||
*/
|
|
||||||
function requestSubmit(obj) {
|
|
||||||
const xhr = new XMLHttpRequest();
|
|
||||||
|
|
||||||
/* 성공/에러 */
|
|
||||||
xhr.addEventListener('load', function () {
|
|
||||||
const data = xhr.responseText;
|
|
||||||
|
|
||||||
if (obj.load) {
|
|
||||||
obj.load(data);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/* 성공 */
|
|
||||||
xhr.addEventListener('loadend', function () {
|
|
||||||
const data = xhr.responseText;
|
|
||||||
console.log(data);
|
|
||||||
|
|
||||||
if (obj.loadend) {
|
|
||||||
obj.loadend(data);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/* 실패 */
|
|
||||||
xhr.addEventListener('error', function () {
|
|
||||||
console.log('파일 업로드 요청 중 에러 발생 : ' + xhr.status + ' / ' + xhr.statusText);
|
|
||||||
|
|
||||||
if (obj.error) {
|
|
||||||
obj.error(xhr, xhr.status, xhr.statusText);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/* 중단 */
|
|
||||||
xhr.addEventListener('abort', function () {
|
|
||||||
if (obj.abort) {
|
|
||||||
obj.abort(xhr);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/* 진행 */
|
|
||||||
xhr.upload.addEventListener('progress', function () {
|
|
||||||
if (obj.progress) {
|
|
||||||
obj.progress(xhr);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/* 요청 시작 */
|
|
||||||
xhr.addEventListener('loadstart', function () {
|
|
||||||
if (obj.loadstart) {
|
|
||||||
obj.loadstart(xhr);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const method = obj.method || 'GET';
|
|
||||||
const url = obj.url || '';
|
|
||||||
const data = obj.data || null;
|
|
||||||
|
|
||||||
if (obj.async === false) {
|
|
||||||
xhr.open(method, url, obj.async);
|
|
||||||
} else {
|
|
||||||
xhr.open(method, url, true);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (obj.contentType) {
|
|
||||||
xhr.setRequestHeader('Content-Type', obj.contentType);
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
xhr.send(data);
|
|
||||||
console.log(xhr.status)
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue