<form action="">
<input name="file1" type="file" id="file1" multiple>
<input name="file2" type="file" id="file2">
<button type="submit">Gönder</button>
</form>
$("form").on("submit", function (e) {
e.preventDefault()
let fd = new FormData()
$(this).find("input[type='file']").each(function () {
if (this.files.length) {
let name = $(this).attr("name")
name = $(this).attr('multiple') ? `${name}[]` : name
for (let i = 0; i < this.files.length; i++) {
fd.append(name, this.files[i])
}
}
})
$.ajax('ajax.php', {
method: "POST",
contentType: false,
processData: false,
data: fd
})
})
Olabildiğince kısa yaz
$select = in_array($value["id"],$test2) ? 'selected="selected"' : "";
Size naçizane bir tavsiyem, daha temiz bir kod yazmaya çalışın. Her şey birbirine girmiş durumda bu kodlarda. Bunun farkına ileride varacaksınız, bu karmaşık görüntü sizi de rahatsız edecek, ve keşke php kodlamaya youtube'daki o video serisinden başlamasaydım diyeceksiniz. Zira o izlediğiniz seri tam bir php katili serisi. Farklı kurslardan daha güzel algoritmalar geliştirecek şekilde öğrenmenizi tavsiye ediyorum.
Başkasını bilmem ama ben yukarıda yazdığınız kodlara bakınca hiç oturup inceleyesim gelmiyor.
<!doctype html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.middle {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.bar {
width: 10px;
height: 70px;
background: #fff;
display: inline-block;
transform-origin: bottom center;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
/* box-shadow:5px 10px 20px inset rgba(255,23,25.2); */
animation: loader 1.2s linear infinite;
}
.bar1 {
animation-delay: 0.1s;
}
.bar2 {
animation-delay: 0.2s;
}
.bar3 {
animation-delay: 0.3s;
}
.bar4 {
animation-delay: 0.4s;
}
.bar5 {
animation-delay: 0.5s;
}
.bar6 {
animation-delay: 0.6s;
}
.bar7 {
animation-delay: 0.7s;
}
.bar8 {
animation-delay: 0.8s;
}
@keyframes loader {
0% {
transform: scaleY(0.1);
background: ;
}
50% {
transform: scaleY(1);
background: yellowgreen;
}
100% {
transform: scaleY(0.1);
background: transparent;
}
}
</style>
</head>
<body>
<button class="btn btn-success">Başlat</button>
Sunucu tarafında 3 saniye bekletip işlem sona erecek
<div id="success"></div>
<div id="fail"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
let loaderTemplate = `<div class="middle preloader">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
<div class="bar bar3"></div>
<div class="bar bar4"></div>
<div class="bar bar5"></div>
<div class="bar bar6"></div>
<div class="bar bar7"></div>
<div class="bar bar8"></div>
</div>`
$("button").on("click", function () {
$.ajax('ajax.php', {
method: "POST",
data: {
ajax: true
},
beforeSend() {
$("body").prepend(loaderTemplate)
}
}).then(success => {
$("#success").html('Sonuç başarılı')
}, fail => {
$("#fail").html('Sonuç başarısız, sunucu hatası')
}).always(() => {
$(".preloader").remove()
})
})
</script>
</body>
</html>
ajax.php
if (isset($_POST['ajax'])) {
sleep(3);
}
preloader.fadeIn(300) yazarak muhtemelen ilk ajax çağrısında dom da olmayan bir ögeyi seçtiğiniz için çalışmıyor. İkinci çağrıda bu yazdığım koddaki preloader değişkeninin nerede oluşturulduğu önemli.
Ayriyeten benim bildiğim preloader sayfada halihazırda bulunur ve duruma göre gösterilip gizlenir, neden sonradan ekleme ihtiyacı duyuyorsunuz?
galeri tablosunda primary key olduğundan emin misiniz?
<!doctype html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<title>Document</title>
<style>
#feedBack {
display: none;
}
.success {
color: #495057;
background-color: #fff;
border-color: #198754 !important;
outline: 0;
box-shadow: 0 0 0 0.2rem rgb(74, 185, 134) !important;
}
.error {
color: #495057;
background-color: #fff;
border-color: #dc3545 !important;
outline: 0;
box-shadow: 0 0 0 0.2rem rgb(229, 88, 102) !important;
}
</style>
</head>
<body>
<div class="container">
<div class="row mt-5">
<div class="col">
<div class="input-group">
<input type="text" class="form-control" placeholder="Arama metnini giriniz" id="searchInput">
<div class="input-group-append">
<button class="btn btn-outline-primary" type="button" id="searchButton">Ara</button>
</div>
</div>
<small id="feedBack"></small>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
const input = $("#searchInput")
const button = $("#searchButton")
const feedBack = $("#feedBack")
const sets = {
errorMessage: 'Kayıt yok',
successMessage: 'Kayıt var',
liveSearch: true // Canlı aramayı kapatmak için false yapın, 1000 lerce kayıt içinde canlı arama yapmak performans sorunları oluşturabilir
};
(function (opt) {
const options = { // Varsayılan değerler
liveSearch: true,
errorMessage: 'Üzgünüz kaydınız bulunamadı',
successMessage: 'Kaydınız başarılı',
...opt,
clear: () => {
feedBack.hide()
input.removeClass('success error')
},
search: inp => {
$.getJSON('filtre.json').then(response => {
let values = response.map(e => e.sw)
if (inp.value.length) {
if (values.includes(inp.value)) {
feedBack.html(options.successMessage).removeClass('text-danger').addClass('text-success').show()
input.removeClass('error').addClass('success')
}
else {
feedBack.html(options.errorMessage).removeClass('text-success').addClass('text-danger').show()
input.removeClass('success').addClass('error')
}
}
else
options.clear()
})
}
}
if (options.liveSearch) {
input.on({
input: function() {
options.search(this)
},
blur: options.clear
})
}
button.on("click", () => {
options.search(input[0])
})
})(sets)
</script>
</body>
</html>
filtre.json aynı dizinde bulunsun.
Bazı geri bildirim özellikleri istenildiği gibi çalışmayabilir. Görsel açıdan
Geçen gün sizin buldum mesajını görünce sonrasına bakmamıştım açıkçası, ardından yazdığınız mesajı görmemişim kusura bakmayın. İnşallah yarın bakacağım fırsat olursa
Yeterli veri sağlamamışsınız, tabloların sütunları nedir hangilerinde arama yapılacak vs. Sorunuz bu haliyle sadece okunup geçilecek bir soru
@mahony İstediğiniz şeyin temel kısmı kolay. Önemli olan teferruatlar. Bootstrap kullanıyorsanız jquery de kullandığınızı varsayıyorum. Sorgu ajax ile mi yapılacak?