Loading:


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>



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;
}



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;
}





 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);
?>

 



Napisz Artyku³

Listing

niema




Dodano przez: igor
Ranga: Administrator serwisu Punktów: 28716
Komentarze użytkowników
    • Tre¶æ komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-2020 v.1.5 | design: diviXdesign & rainbowcolors