У меня есть HTML-форма для регистрации пользователя.
Форма требует от пользователя загрузить изображение профиля.
Изображение было ранее отправлено на сервер со всеми другими данными формы, но я должен изменить его, потому что необходимо показать большой палец изображения после того, как изображение выбрано пользователем.
Итак, я написал код javascript для загрузки изображения с помощью ajax (другие данные будут отправлены, когда пользователь отправит форму).
Код, который я написал сам по себе, выполняет свою работу (изображение успешно загружено, и большой палец отображается в форме), но проблема в том, что страница неожиданно перезагружается после запроса ajax.
ВАЖНО: Я не говорю, что страница действия формы загружена. Я говорю, что страница, которая содержит форму, переформатирована, и поэтому все данные в форме будут потеряны.
Здесь ниже вы можете прочитать код JavaScript, относящийся к загрузке файла.
Как видите, код удаляет все прослушиватели событий всех элементов страницы благодаря функции jQuery off (), чтобы гарантировать, что ни одно событие не будет запущено после запроса ajax.
Кроме того, в объекте события распространение останавливается, и по умолчанию предотвращается.
$(document).ready(function() {
$("img").hover(function() {
$('.editCV').css("display", "block");
}, function() {
$('.editCV').css("display", "none");
});
document.getElementById("profilePicture").addEventListener("change", onProfilePictureUpload);
});
function onProfilePictureUpload(e) {
e.stopPropagation();
e.stopImmediatePropagation();
e.preventDefault();
var file_data = $('#profilePicture').prop('files')[0];
var form_data = new FormData();
form_data.append('profile', file_data);
uploadProfilePicture(form_data);
}
function uploadProfilePicture(formData) {
var elements = document.querySelectorAll("*");
for (var k = 0; k < elements.length; k++) {
$(elements[k]).off();
}
/*Here above all event listeners of all elements of the page are deleted
to ensure that page reload is not caused by the fire of an event*/
$.ajax({
url: 'post_profile_picture.php', // point to server-side PHP script
dataType: 'text', // what to expect back from the PHP script, if anything
cache: false,
contentType: false,
processData: false,
data: formData,
type: 'post',
success: function(picturePath) {
document.getElementById("profilePictureThumb").src = picturePath;
}
});
}
Здесь ниже вы можете прочитать HTML-код, где содержится форма.
<div class="lookfor">
<form enctype="multipart/form-data" name="myForm" onsubmit="return validateForm()" action="post_nannie.php?email=<?php echo $email ?>" method="POST">
<div class="need">
<div class="row">
<div class="input-field col m4 s12">
<input disabled type="text" value="<?php echo $row['name']?>">
<label for="first_name">Nome</label>
</div>
<div class="input-field col m4 s12">
<input disabled type="text" value="<?php echo $row['last_name']?>">
<label for="first_name">Cognome</label>
</div>
<div class="input-field col m4 s12">
<input disabled type="text" value="<?php echo $row['data']?>">
<label for="first_name">Giorno di nascita</label>
</div>
</div>
<div class="row">
<div class="input-field col m4 s12">
<input disabled type="text" value="<?php echo $row['phone']?>">
<label for="first_name">Telefono</label>
</div>
<div class="input-field col m4 s12">
<input disabled type="text" value="<?php echo $row['email']?>">
<label for="first_name">Email</label>
</div>
<div class="input-field col m4 s12">
<input disabled type="text" value="<?php echo $row['skype']?>">
<label for="first_name">Skype</label>
</div>
</div>
<div class="row">
<div class="input-field col m3 s12">
<input disabled type="text" value="<?php echo $row['country']?>">
<label for="first_name">Nazione</label>
</div>
<div class="input-field col m9 s12">
<input disabled type="text" value="<?php echo $row['adress']?>">
<label for="first_name">Indirizzo</label>
</div>
</div>
<div class="row">
<div class="input-field col m6 s12">
<h6>Seleziona il tuo stato giuridico</h6>
<select name="type" required>
<option value=" " selected>Stato giuridico</option>
<?php
foreach ($types as $key => $value) {
echo'
<option value="' . $key . '">' . $value . '</option>
';
}
?>
</select>
</div>
<div class="input-field col m6 s12">
<h6>Seleziona la tua nationalità</h6>
<select name="nation" required>
<option value=" " selected>Nationalità</option>
<?php
foreach ($countries as $value) {
echo'
<option value="'.$value.'">'.$value.'</option>
';
}
?>
</select>
</div>
<div class="input-field col m6 s12">
<h6>Quante lingue parli</h6>
<select name="languages" id="languages" onchange="val()" required>
<option value=" " selected>0</option>
<?php
for ($i=1; $i <= 6 ; $i++) {
echo'<option value="'.$i.'">'.$i.'</option>';
}
?>
</select>
</div>
<div class="input-field col m6 s12" id="uno" style="display: none;">
<select name="lang_one">
<option value="" selected>Lingua</option>
<?php
foreach ($language as $value) {
echo'
<option value="'.$value.'">'.$value.'</option>
';
} ?>
</select>
</div>
<div class="input-field col m6 s12" id="due" style="display: none;">
<select name="lang_due" >
<option value="" selected>Lingua</option>
<?php
foreach ($language as $value) {
echo'
<option value="'.$value.'">'.$value.'</option>
';
} ?>
</select>
</div>
<div class="input-field col m6 s12" id="tre" style="display: none;">
<select name="lang_tre" >
<option value="" selected>Lingua</option>
<?php
foreach ($language as $value) {
echo'
<option value="'.$value.'">'.$value.'</option>
';
} ?>
</select>
</div>
<div class="input-field col m6 s12" id="quattro" style="display: none;">
<select name="lang_quattro" >
<option value="" selected>Lingua</option>
<?php
foreach ($language as $value) {
echo'
<option value="'.$value.'">'.$value.'</option>
';
} ?>
</select>
</div>
<div class="input-field col m6 s12" id="cinque" style="display: none;">
<select name="lang_cinque" >
<option value="" selected>Lingua</option>
<?php
foreach ($language as $value) {
echo'
<option value="'.$value.'">'.$value.'</option>
';
} ?>
</select>
</div>
<div class="input-field col m6 s12" id="sei" style="display: none;">
<select name="lang_sei" >
<option value="" selected>Lingua</option>
<?php
foreach ($language as $value) {
echo'
<option value="'.$value.'">'.$value.'</option>
';
} ?>
</select>
</div>
</div>
<div class="row">
<div class="input-field col l6 m6 s12">
<input type="checkbox" class="filled-in" name="smoke" onclick="blockMon();sumMon++" id="filled-in-box" />
<label for="filled-in-box">Fumo</label>
</div>
<div class="input-field col l6 m6 s12">
<input type="checkbox" class="filled-in" name="clean" onclick="blockMon();sumMon++" id="filled-in-box2" />
<label for="filled-in-box2">Potrei pulire la casa</label>
</div>
</div>
<div class="row">
<div class="input-field col l6 m6 s12">
<input type="checkbox" class="filled-in" name="license" onclick="blockMon();sumMon++" id="filled-in-box3" />
<label for="filled-in-box3">Ho la patente</label>
</div>
<div class="input-field col l6 m6 s12">
<input type="checkbox" class="filled-in" name="car" onclick="blockMon();sumMon++" id="filled-in-box4" />
<label for="filled-in-box4">Ho la macchina</label>
</div>
</div>
<div class="row">
<div class="input-field col l6 m6 s12">
<input type="checkbox" class="filled-in" name="reference" onclick="blockMon();sumMon++" id="filled-in-box5" />
<label for="filled-in-box5">Ho referenze</label>
</div>
</div>
<div class="row">
<div class="input-field file-field col l6 m6 s12">
<h6>Inserisci Referenze</h6>
<div class="btn">
<span>File</span>
<input type="hidden" value="300000">
<input type="file" name="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
<div class="input-field file-field col l6 m6 s12">
<h6>Inserisci la tua foto profilo</h6>
<img id="profilePictureThumb" alt="Foto profilo" height="100" src="#">
<div class="btn">
<span>File</span>
<input type="hidden" value="30000">
<input id="profilePicture" type="file" name="profile" accept="image/*" />
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</div>
<div class="row">
<h6>Hai alergie?</h6>
<div class="input-field col s12">
<textarea id="textarea1" name="alergies" class="materialize-textarea"></textarea>
<label for="textarea1">Per favore, elencale qua sotto</label>
</div>
</div>
<div class="row">
<h6>Formazione</h6>
<div class="input-field col m11 s10">
<textarea id="textarea1" name="study_one" class="materialize-textarea"></textarea>
<label for="textarea1">Per favore, descrivi il la tua formazione</label>
</div>
<div class="input-field col m11 s10" id="study2" style="display: none;">
<textarea id="textarea1" name="study_due" class="materialize-textarea"></textarea>
<label for="textarea1">Per favore, descrivi il la tua formazione</label>
</div>
<div class="input-field col m11 s10" id="study3" style="display: none;">
<textarea id="textarea1" name="study_tre" class="materialize-textarea"></textarea>
<label for="textarea1">Per favore, descrivi il la tua formazione</label>
</div>
<div class="input-field col m11 s10" id="study4" style="display: none;">
<textarea id="textarea1" name="study_quattro" class="materialize-textarea"></textarea>
<label for="textarea1">Per favore, descrivi il la tua formazione</label>
</div>
<div class="input-field col m11 s10" id="study5" style="display: none;">
<textarea id="textarea1" name="study_cinque" class="materialize-textarea"></textarea>
<label for="textarea1">Per favore, descrivi il la tua formazione</label>
</div>
<div class="input-field col m11 s10" id="study6" style="display: none;">
<textarea id="textarea1" name="study_sei" class="materialize-textarea"></textarea>
<label for="textarea1">Per favore, descrivi il la tua formazione</label>
</div>
<div class="input-field col m11 s10" id="study7" style="display: none;">
<textarea id="textarea1" name="study_sette" class="materialize-textarea"></textarea>
<label for="textarea1">Per favore, descrivi il la tua formazione</label>
</div>
<div class="input-field col m11 s10" id="study8" style="display: none;">
<textarea id="textarea1" name="study_otto" class="materialize-textarea"></textarea>
<label for="textarea1">Per favore, descrivi il la tua formazione</label>
</div>
<div id="topmarginStudy">
<a class="btn-floating btn-medium waves-effect waves-light" id="topmarginStudy" onClick="clickStudy++;displayStudy()"><i class="material-icons">add</i></a>
</div>
</div>
<div class="row">
<h6>Esperienza Lavorativa</h6>
<div class="input-field col m11 s10">
<textarea id="textarea1" name="job_one" class="materialize-textarea"></textarea>
<label for="textarea1">Per favore, descrivi la tua esperienza lavorativa</label>
</div>
<div class="input-field col m11 s10" id="display1" style="display: none;">
<textarea id="textarea1" name="job_due" class="materialize-textarea"></textarea>
<label for="textarea1">Per favore, descrivi la tua esperienza lavorativa</label>
</div>
<div class="input-field col m11 s10" id="display2" style="display: none;">
<textarea id="textarea1" name="job_tre" class="materialize-textarea"></textarea>
<label for="textarea1">Per favore, descrivi la tua esperienza lavorativa</label>
</div>
<div class="input-field col m11 s10" id="display3" style="display: none;">
<textarea id="textarea1" name="job_quattro" class="materialize-textarea"></textarea>
<label for="textarea1">Per favore, descrivi la tua esperienza lavorativa</label>
</div>
<div class="input-field col m11 s10" id="display4" style="display: none;">
<textarea id="textarea1" name="job_cinque" class="materialize-textarea"></textarea>
<label for="textarea1">Per favore, descrivi la tua esperienza lavorativa</label>
</div>
<div class="input-field col m11 s10" id="display5" style="display: none;">
<textarea id="textarea1" name="job_sei" class="materialize-textarea"></textarea>
<label for="textarea1">Per favore, descrivi la tua esperienza lavorativa</label>
</div>
<div class="input-field col m11 s10" id="display6" style="display: none;">
<textarea id="textarea1" name="job_sette" class="materialize-textarea"></textarea>
<label for="textarea1">Per favore, descrivi la tua esperienza lavorativa</label>
</div>
<div class="input-field col m11 s10" id="display7" style="display: none;">
<textarea id="textarea1" name="job_otto" class="materialize-textarea"></textarea>
<label for="textarea1">Per favore, descrivi la tua esperienza lavorativa</label>
</div>
<div class="input-field col m11 s10" id="display8" style="display: none;">
<textarea id="textarea1" name="job_nove" class="materialize-textarea"></textarea>
<label for="textarea1">Per favore, descrivi la tua esperienza lavorativa</label>
</div>
<div class="input-field col m11 s10" id="display9" style="display: none;">
<textarea id="textarea1" name="job_dieci" class="materialize-textarea"></textarea>
<label for="textarea1">Per favore, descrivi la tua esperienza lavorativa</label>
</div>
<div id="topmargin">
<a class="btn-floating btn-medium waves-effect waves-light" id="topmargin" onClick="clicks++;displayWork()"><i class="material-icons">add</i></a>
</div>
</div>
<div class="row">
<h6>Descrizione</h6>
<div class="input-field col s12">
<textarea id="textarea1" name="message" class="materialize-textarea"></textarea>
<label for="textarea1">Per favore, descriviti un po'</label>
</div>
</div>
<button type="submit" class="btn-large waves-effect waves-light teal darken-4 centerDiv">Invia</button>
</div>
</form>
</div>
Код (оба javascript / jQuery) содержится в файле с именем «nannie.php», который перезагружается после каждого ajax-запроса.
Запрос ajax направлен на "post_profile_picture.php".
Форма отправлена по адресу "post_nannie.php".
Здесь ниже вы можете прочитать весь код "post_profile_picture.php".
<?php
$profile=$_FILES['profile']['name'];
$profile = str_replace(' ', '', $profile);
$profile = utf8_decode($profile);
if (isset($_FILES['profile']['name'])) {
//percorso della cartella dove mettere i file caricati dagli utenti
$uploaddirPro = '../file/profile/';
//echo $uploaddir; echo "<br>";
//Recupero il percorso temporaneo del file
$userfile_tmpPro = $_FILES['profile']['tmp_name'];
//echo $userfile_tmp; echo "<br>";
//recupero il nome originale del file caricato
$userfile_namePro = $profile;
//echo $userfile_tmp;
//echo $userfile_name; echo "<br>";
//echo $_FILES[$field]['error'];echo "<br>";
move_uploaded_file($userfile_tmpPro, $uploaddirPro . $userfile_namePro);
echo $uploaddirPro . $userfile_namePro;
}