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