https://stackoverflow.com/questions/31061838/how-do-i-cancel-an-http-fetch-request
How do I cancel an HTTP fetch() request?
There is a new API for making requests from JavaScript: fetch(). Is there any built in mechanism for canceling these requests in-flight?
stackoverflow.com
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#result {
width:90%;
padding: 10px;
margin: 10px;
border: 1px solid red;
}
#result_explode {
width:90%;
padding: 10px;
margin: 10px;
border: 1px solid blue;
}
</style>
</head>
<body>
<!--
<form method="post" enctype="multipart/form-data" action="http://90.7/fileUpload.php">
<input type="file" name="file">
<input type="submit">
</form>
-->
<p><input type="file" name="sample_image" /> </p>
<div class="text-center" id="uploaded_image"></div>
<div class="text-center" id="result"></div>
<div class="text-center" id="result_explode"></div>
<div class="loader" id="loading" style="display:none"><br><br>OCR 분성중....ybr>1분이상....<br>오래걸림</div>
<div><button type="button" id="abort">중지</button></div>
<script>
const controller = new AbortController();
const signal = controller.signal;
const sample_image = document.getElementsByName('sample_image')[0];
sample_image.addEventListener('change', () => {
upload_image(sample_image.files[0]);
clear();
});
const upload_image = (file) => {
// check file type
if(!['image/jpeg', 'image/png'].includes(file.type))
{
document.getElementById('uploaded_image').innerHTML = '<div class="alert alert-danger">Only .jpg and .png image are allowed</div>';
document.getElementsByName('sample_image')[0].value = '';
return;
}
// check file size (< 2MB)
if(file.size > 20 * 1024 * 1024)
{
document.getElementById('uploaded_image').innerHTML = '<div class="alert alert-danger">File must be less than 2 MB</div>';
document.getElementsByName('sample_image')[0].value = '';
return;
}
const form_data = new FormData();
form_data.append('sample_image', file);
fetch("fileUpload.php", {
method:"POST",
body : form_data,
}).then(function(response){
return response.json();
}).then(function(responseData){
document.getElementById('uploaded_image').innerHTML = '<img width="90%" src="'+responseData.image_source+'" class="img-thumbnail" />';
document.getElementsByName('sample_image')[0].value = '';
easyOCR(responseData.image_source);
});
}
const clear =_=>{
document.getElementById('result').style.display = 'none';
document.getElementById('result_explode').style.display = 'none';
}
const show =_=>{
document.getElementById('result').style.display = 'block';
document.getElementById('result_explode').style.display = 'block';
}
const easyOCR = fn => {
//document.getElementById('loading').style.display = 'block';
document.querySelector("#loading").style.display = 'block';
fetch("php_py_exec.php?"+new URLSearchParams({
fn: fn
}), {
method:"GET",
signal: signal,
}).then(function(response) {
document.getElementById('loading').style.display = 'none';
return response.json();
}).then(function(responseData) {
show();
console.log(responseData.result);
console.log(responseData.result_explode);
document.getElementById('result').innerHTML = responseData.result;
document.getElementById('result_explode').innerHTML = responseData.result_explode;
});
}
const abortFetch=_=>{
console.log('now aborting');
controller.abort();
document.querySelector("#loading").style.display = 'none';
}
let el = document.querySelector("#abort");
el.addEventListener("click", abortFetch);
</script>
</body>
</html>
'프로그래밍 > Js' 카테고리의 다른 글
| [ES6+] 버튼 클릭시 클랙스 메소드 바로실행(if문 사용 안함) (0) | 2021.11.04 |
|---|---|
| service worker push API 제작기 (1) - 권한요청 (0) | 2021.10.29 |
| JavaScript Lexical Grammar (0) | 2021.10.21 |
| ES6+ 2차원배열 foreach (0) | 2018.11.23 |
| ES6+ html parser 재귀함수 (0) | 2018.11.23 |