Loading:

Rozwiń skrzydła w branży IT [Książki drukowane -35%| Ebooki -50%]

Ostatnio dodane

php Upload dodaw PHP Tworzenia mi Logowanie obiekt Prosty system sz Lista plików z Jak zbudować pr Jak zamienić w IP uzytkownika Obiekt Timer [AS Proste skrypty w

Top 10

1.lstat 2.pi 3.hw_Connect 4.asoc() 5.fopen() 6.yp_match 7.rewind 8.readline() 9.tanh 10.ftp_chdir

56853.05

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