CSS bez tajemnic. 47 sekretów kreatywnego projektantaCena: 38.35 zł
Bootstrap 4 dla zaawansowanych. Jak pisać znakomite aplikacje interne...Cena: 31.85 zł
PHP, MySQL i JavaScript. Wprowadzenie. Wydanie VCena: 77.35 zł
HTML i CSS. Zaprojektuj i zbuduj witrynę WWW. Podręcznik Front-End D...Cena: 57.85 zł
Upload, wgrywanie, wysyłanie plików, obrazków za pomocą AJAX
W jaki sposób stworzyć upload plików na serwer za pomocą AJAX bez przeładowania strony z animowanym paskiem postępu ładowania.
Zobacz Demo
Pobierz Skrypt
Tak naprawde musisz wiedzieć że nie można uploadowac obrazków za pomocą AJAX ze względów bezpieczeństwa to co zostanie tu przedstawione to trik imitujący AJAX.
Na początek tworzymy plik HTML:
<body>
<p id="f1_upload_process">Loading...<br/><img src="loader.gif" /></p>
<p id="result"></p>
<form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
File: <input name="myfile" type="file" />
<input type="submit" name="submitBtn" value="Upload" />
</form>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</body>
<p id="f1_upload_process">Loading...<br/><img src="loader.gif" /></p>
<p id="result"></p>
<form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
File: <input name="myfile" type="file" />
<input type="submit" name="submitBtn" value="Upload" />
</form>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</body>
Teraz potrzebny będzie nam plik JavaScript odpowiadający za ukrycie formularza po przyciesnieciu upload i wyświetleniu paska łądowania aż do zakończenia ładowania.
function stopUpload(success){
var result = '';
if (success == 1){
document.getElementById('result').innerHTML =
'<span class="msg">The file was uploaded successfully!<\/span><br/><br/>';
}
else {
document.getElementById('result').innerHTML =
'<span class="emsg">There was an error during file upload!<\/span><br/><br/>';
}
document.getElementById('f1_upload_process').style.visibility = 'hidden';
return true;
}
var result = '';
if (success == 1){
document.getElementById('result').innerHTML =
'<span class="msg">The file was uploaded successfully!<\/span><br/><br/>';
}
else {
document.getElementById('result').innerHTML =
'<span class="emsg">There was an error during file upload!<\/span><br/><br/>';
}
document.getElementById('f1_upload_process').style.visibility = 'hidden';
return true;
}
Przykładowy CSS
#f1_upload_process{
z-index:100;
position:absolute;
visibility:hidden;
text-align:center;
width:400px;
margin:0px;
padding:0px;
background-color:#fff;
border:1px solid #ccc;
}
form{
text-align:center;
width:390px;
margin:0px;
padding:5px;
background-color:#fff;
border:1px solid #ccc;
}
z-index:100;
position:absolute;
visibility:hidden;
text-align:center;
width:400px;
margin:0px;
padding:0px;
background-color:#fff;
border:1px solid #ccc;
}
form{
text-align:center;
width:390px;
margin:0px;
padding:5px;
background-color:#fff;
border:1px solid #ccc;
}
Prosty upload pliku - upload.php
<?php
$destination_path = getcwd().DIRECTORY_SEPARATOR;
$result = 0;
$target_path = $destination_path . basename( $_FILES['myfile']['name']);
if(@move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
$result = 1;
}
sleep(1);
?>
$destination_path = getcwd().DIRECTORY_SEPARATOR;
$result = 0;
$target_path = $destination_path . basename( $_FILES['myfile']['name']);
if(@move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
$result = 1;
}
sleep(1);
?>
Listing
niema
Dodano przez: igor
Ranga: Administrator serwisu Punktów: 0
Ranga: Administrator serwisu Punktów: 0
Komentarze użytkowników
:: Losowe artykuły
![](http://funkcje.net/admin/images/kreska.jpg)
:: Wymiana linków
![](http://funkcje.net/images/kreska.jpg)
Modowe inspiracje |
Android Gry i Aplikacje |
ZaplanujTransport.pl: Przeprowadzki, transport, aukcje |
Logo dla firmy |
Change Tires - Car Weather Forecast Reminder |
Laminas: MVC Framework for PHP |
IT Books Reviews and Programming: JS, JAVA, PHP, ANDROID, CSS |
Katalog roślin |
Programming articles: JAVA, PHP, C++, Python, JavaScript |
Kancelaria Adwokacka Łukasz Huszno