我有一个用于用户注册的HTML表单。
该表格要求用户上传个人资料图片。
图片先前已与表格的所有其他数据一起发送到服务器，但是我必须更改它，因为在用户选择图片后必须显示图片的缩略图。 因此，我写了一些JavaScript代码用ajax上传图片（当用户提交表单时，其他数据将被发送）。
我自己编写的代码完成了他的工作（成功上传了图片，并且以表格形式显示了大拇指），但是问题是在ajax请求之后意外地重新加载了页面。
重要信息：我并不是说表单操作的页面已加载。我是说，包含表单的页面已被修改，因此表单中的alla数据将丢失。
在下面，您可以阅读有关文件上传的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;
}