Там есть кнопка «изменить профиль», и когда вы нажимаете на нее, появляется форма, где вы можете изменить заголовок, биографию и картинка профиля. Когда вы выбрали изображение, у меня есть JS, который уже показывает его, но когда я нажимаю «сохранить профиль», изображение не сохраняется ни в базе данных, ни в папке изображений, куда они должны идти. Поэтому, когда я перезагружаю страницу, снова отображается старая фотография профиля.
Извините, но все мои комментарии написаны на шведском языке. Я опубликую свой код из Administration.php здесь:
Код: Выделить всё
[h4]Mina blogginlägg[/h4]
[url=#]Blogginläggets namn[/url]
[url=#]Ändra[/url]
[img]https://placehold.co/20x20[/img]
[url=#]Blogginläggets namn[/url]
[url=#]Ändra[/url]
[img]https://placehold.co/20x20[/img]
[url=#]Blogginläggets namn[/url]
[url=#]Ändra[/url]
[img]https://placehold.co/20x20[/img]
[url=#]Blogginläggets namn[/url]
[url=#]Ändra[/url]
[img]https://placehold.co/20x20[/img]
[url=create_edit_post.php]Skapa nytt blogginlägg[/url]
Код: Выделить всё
document.write("
(Lägg till js för validation av login-formulär)");
// - - - Administration - redigera profil - - -
document.getElementById('edit-profile-btn').addEventListener('click', function() {
//Visa formulär
document.getElementById('edit-profile-form').style.display = 'block';
//Göm text och knapp
document.getElementById('profile-title').style.display = 'none';
document.getElementById('user-bio').style.display = 'none';
document.getElementById('edit-profile-btn').style.display = 'none';
});
//Hantera ny profilbild
document.getElementById('profile-pic-input').addEventListener('change', function() {
let newProfilePic = this.files[0];
let reader = new FileReader();
reader.onload = function(e) {
document.getElementById('profile-pic').style.backgroundImage = "url('" + e.target.result + "')";
}
reader.readAsDataURL(newProfilePic);
});
//Valideringsfunktion för profilbild
function validateProfilePic() {
let profilePicInput = document.getElementById('profile-pic-input');
let profilePicError = document.getElementById('profile-pic-error');
let file = profilePicInput.files[0];
if (file) {
let allowedExtensions = ['jpg', 'jpeg', 'png'];
let fileExtension = file.name.split('.').pop().toLowerCase();
let fileSize = file.size;
if (!allowedExtensions.includes(fileExtension)) {
profilePicError.textContent = "Endast jpg, jpeg och png är tillåtna.";
return false;
} else if (fileSize > 2 * 1024 * 1024) { //Max 2 MB i storlek
profilePicError.textContent = "Filen är för stor. Maxstorlek är 2MB.";
return false;
} else {
profilePicError.textContent = '';
return true;
}
}
profilePicError.textContent = '';
return true;
}
//Deklarerar en variabel utanför funktionen för timeout för att göra den tillgänglig överallt (Att errormeddelandet över submit-knappen har en timer tills den göms)
let errorTimeout;
//Spara profil när knappen klickas
document.getElementById('save-profile-btn').addEventListener('click', function(event) {
event.preventDefault(); //Förhindrar standardformulärets inskick
//Utför validering av formuläret
let isTitleValid = validateTitle();
let isBioValid = validateBio();
let isProfilePicValid = validateProfilePic();
//Kontrollerar om titel, bio och profilbild är godkända
if(isTitleValid && isBioValid && isProfilePicValid) {
//Hämta värden från formulärfält
let newName = document.getElementById('title-input').value;
let newBio = document.getElementById('bio-textarea').value;
let newProfilePic = document.getElementById('profile-pic-input').files[0];
//Skapar ett formData-objekt för att skicka data via AJAX
let formData = new FormData();
formData.append('title-input', newName);
formData.append('bio-textarea', newBio);
if(newProfilePic) {
formData.append('profile-pic-input', newProfilePic);
}
//Skicka AJAX-begäran till servern (för att kunna visa den nybytta bilden i realtid)
fetch('administration.php', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => {
//Hanterar svaret från servern
if (data.includes('Error:')) {
formError.textContent = data;
} else {
//Uppdaterar profilinformationen på sidan
document.getElementById('profile-title').textContent = newName;
document.getElementById('user-bio').textContent = newBio;
//Uppdaterar profilbilden
if (newProfilePic) {
let reader = new FileReader();
reader.onload = function(e) {
document.getElementById('profile-pic').style.backgroundImage = "url('" + e.target.result + "')";
}
reader.readAsDataURL(newProfilePic);
}
//Göm formuläret och visa text och knapp igen
document.getElementById('edit-profile-form').style.display = 'none';
document.getElementById('profile-title').style.display = 'block';
document.getElementById('user-bio').style.display = 'block';
document.getElementById('edit-profile-btn').style.display = 'block';
}
})
.catch(error => {
console.error('Error:', error);
formError.textContent = "Något gick fel. Försök igen senare.";
});
} else { //Vid ej godkänd validering vid knapptryck (valideringsfelmeddelanden)
if (!isTitleValid) {
if (titleInput.value.length === 0) {
formError.textContent = "Du måste fylla i en titel.";
} else if (titleInput.value.length > 500) {
formError.textContent = "Din titel är för lång.";
}
}
if (!isBioValid) {
//Om errormeddelandet inte är tomt, läggs ett till på med ett mellanrum mellan dem.
formError.textContent += (formError.textContent ? " " : "") + "Din biografi är för lång.";
}
if (!isProfilePicValid) {
formError.textContent += (formError.textContent ? " " : "") + "Ogiltig profilbild.";
}
//Starta timeout för att gömma errormeddelandet över submitknappen efter en stund
clearTimeout(errorTimeout); //Rensar först tidigare timeout om det finns någon
errorTimeout = setTimeout(function() {
formError.textContent = ''; //Gör errormeddelandet tomt efter timeout
}, 5000); //5000 ms = 5 sekunder
}
});
//Validering av formulär på administration.php-sidan (För att ändra profil)
//Hämtar referenser till de relevanta input-fälten och meddelandeelementen
let titleInput = document.getElementById("title-input");
let bioTextarea = document.getElementById("bio-textarea");
let titleError = document.getElementById("title-error"); //Referens till meddelande-elementet för titel
let bioCounter = document.getElementById("bio-counter"); //Referens till räknaren under bio-textarea
let form = document.getElementById("edit-profile-form");
let formError = document.getElementById("form-error"); //Referens till div m. errormeddelanden över submit-knappen
let profilePicError = document.getElementById("profile-pic-error");
//Lägger till en händelselyssnare för 'input' händelse på titel-inputfältet och bio-textarea
titleInput.addEventListener("input", validateTitle);
bioTextarea.addEventListener("input", validateBio);
//Valideringsfunktion för titel
function validateTitle() {
let titleValue = titleInput.value;
if (titleValue.length === 0) {
titleInput.style.border = '1px solid red'; // Visa valideringsfel i realtid genom att ändra ramfärgen
titleError.textContent = "Fyll i en titel"; // Visa meddelande för tom titel
return false;
} else if (titleValue.length > 500) {
titleInput.style.border = '1px solid red'; // Visa valideringsfel i realtid genom att ändra ramfärgen
titleError.textContent = "Välj en kortare titel"; // Visa meddelande för för lång titel
return false;
} else {
titleInput.style.border = ''; // Återställ ramen om ingen valideringsfel
titleError.textContent = ''; // Återställ meddelandet om ingen valideringsfel
return true;
}
}
//Valideringsfunktion för biografi
function validateBio() {
let bioValue = bioTextarea.value;
let bioLength = bioValue.length;
bioCounter.textContent = bioLength + "/500"; //Uppdaterar räknaren
if (bioLength > 500) {
bioTextarea.style.border = '1px solid red'; //Visar valideringsfel i realtid genom att ändra ramfärgen
bioCounter.style.color = 'red'; //Ändrar räknarens färg till röd
return false;
} else {
bioTextarea.style.border = ''; //Återställer ramen om det inte förekommer valideringsfel
bioCounter.style.color = 'blue'; //Återställer räknarens färg till blå -||-
return true;
}
}
validateBio(); //Anropar funktionen för att räknaren ska synas även innan användaren börjar skriva i rutan.
//Validering vid formulärinskick (eventuella errormeddelanden)
form.addEventListener("submit", function(event) {
formError.textContent = ''; //Errormeddelandet ska initialt vara tomt
let isTitleValid = validateTitle();
let isBioValid = validateBio();
let isFormValid = isTitleValid && isBioValid; //Flagga för att hålla koll på om formuläret är godkänt
if (!isFormValid) {
event.preventDefault(); //Förhindra formulärinskick om valideringen inte är godkänd.
if(!isTitleValid) {
if (titleInput.value.length === 0) {
formError.textContent = "Du måste fylla i en titel.";
} else if (titleInput.value.length > 500) {
formError.textContent = "Din titel är för lång.";
}
}
if (!isBioValid) {
//Om errormeddelandet inte är tomt, läggs ett till på med ett mellanrum mellan dem.
formError.textContent += (formError.textContent ? " " : "") + "Din biografi är för lång.";
}
//Startar timeout för att gömma errormeddelandet efter 5 sekunder
clearTimeout(errorTimeout); //Rensar först tidigare timeout om det finns någon
errorTimeout = setTimeout(function() {
formError.textContent = ''; //Gör errormeddelanndet tomt efter timeout
}, 5000); //5000 ms = 5 sekunder
}
});
Код: Выделить всё
Подробнее здесь: [url]https://stackoverflow.com/questions/78502853/how-can-i-save-images-into-my-phpmyadmin-database[/url]