Здравствуйте! У меня есть код загрузка csv таблицы в базу данных mysql, все работало норм, и в один день почему-то перестало... В чем ошибка ? нечего не правил просто через время зашел, загружаю csv и не вываливается кнопка upload и нет возможности загрузить....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SpyTool.ru - Download</title>
<link rel="icon" href="https://amigurumi.su/wp-content/uploads/2018/04/cropped-amigurumi.su-favicon.png">
<link rel="stylesheet" href="/css/pup.css">
</head>
<body>
<div class="main" id="main">
<div class="container">
<form class="main-box" id="open_files" data-url="/ajax.php" method="post" enctype="multipart/form-data">
<div class="box-content">
<div class="svg">
<svg width="66" height="57" viewBox="0 0 66 57" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.70977 0H19.4194C20.2733 0 21.0742 0.402215 21.5857 1.08315L25.3821 6.14266C25.8937 6.82361 26.6946 7.22581 27.5484 7.22581H62.3226C63.8185 7.22581 65.0323 8.43956 65.0323 9.93548V53.2903C65.0323 54.7862 63.8185 56 62.3226 56H2.70968C1.21376 56 0 54.7862 0 53.2903V2.70968C0 1.21375 1.21385 0 2.70977 0Z" transform="translate(0.0177612 0.740387)" fill="#4F8AFE" />
</svg>
</div>
<div class="text">
<p class="title">Upload files</p>
<!-- <span>Modified: Today</span> -->
</div>
<div class="dots">
<div></div>
<div></div>
<div></div>
</div>
<input id="files" type="file" name="file" accept="" hidden>
<input id="action" type="text" name="action" value="upload_files" hidden>
</div>
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
window.onload = function() {
String.prototype.strstr = function(search) {
var position = this.indexOf(search);
if (position == -1) {
// not found
return false;
}
return true;
};
var upload_btn = `<div class="button" id="upload_btn">
<a>
<span>Upload Now</span>
<svg class="load" version="1.1" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 40 40" enable-background="new 0 0 40 40">
<path opacity="0.3" fill="#fff" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z" />
<path fill="#fff" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
C22.32,8.481,24.301,9.057,26.013,10.047z">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.5s" repeatCount="indefinite" />
</path>
</svg>
<svg class="check" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
</svg>
</a>
<div>
<span></span>
</div>
</div>`;
document.getElementById('open_files').addEventListener('click', function() {
document.getElementById('files').click();
})
$(document).on('click', "#upload_btn", function() {
var btn = $(this);
sendAjax(document.getElementById('open_files'), $('#open_files').data('url'), btn)
})
document.getElementById('files').addEventListener('change', function() {
if (document.getElementById('upload_btn')) {
document.getElementById('upload_btn').remove()
}
if (this.value != '') {
var type = this.files[0].type
document.querySelector('p.title').innerHTML = type
if (type.strstr('application/vnd.ms-excel')) {
document.getElementById('main').insertAdjacentHTML('beforeend', upload_btn);
}
}
});
function sendAjax(formData, url, btn = null) {
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
percentComplete = parseInt(percentComplete * 100);
if (btn != null) {
var loadSVG = btn.children("a").children(".load");
var loadBar = btn.children("div").children("span");
var checkSVG = btn.children("a").children(".check");
btn.children("a").children("span").fadeOut(200)
btn.children("a").animate({
width: 56,
}, 100)
btn.animate({
width: 320,
}, 200)
loadBar.css({
width: percentComplete + '%',
})
loadSVG.fadeIn(300)
btn.children("div").fadeIn(200)
checkSVG.fadeOut(200)
console.log(percentComplete)
if (percentComplete == 100) {
console.log('percentComplete' + percentComplete)
checkSVG.fadeIn(200)
setTimeout(function() {
btn.children("a").children("span").fadeIn(200)
btn.children("a").animate({
width: 150,
}, 100)
btn.animate({
width: 150,
}, 200)
btn.width(150)
loadBar.css({
width: 0,
})
btn.children("div").fadeOut(200)
loadSVG.fadeOut(300)
checkSVG.fadeOut(200)
}, 200)
}
}
}
}, false);
return xhr;
},
type: 'post',
url: url,
data: new FormData(formData),
dataType: 'JSON',
contentType: false,
cache: false,
processData: false,
success: function(data) {
location.reload()
},
error: function(data) {
location.reload()
}
})
}
}
</script>
</body>
</html>
Простой
