Upload pliku w php i ajax

0

upload.php

 <?php
   // Edit upload location here
   $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);
?>

<script language="javascript" type="text/javascript">window.top.window.stopUpload(<?php echo $result; ?>);</script>

index.php

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Funkcje.net Ajax UPLOADER</title>
   <link href="style/style.css" rel="stylesheet" type="text/css" />
   
<script language="javascript" type="text/javascript">
<!--
function startUpload(){
      document.getElementById('f1_upload_process').style.visibility = 'visible';
      document.getElementById('f1_upload_form').style.visibility = 'hidden';
      return true;
}

function stopUpload(success){
      var result = '';
      if (success == 1){
         result = '<span class="msg">Plik został załadowany!<\/span><br/><br/>';
      }
      else {
         result = '<span class="emsg">Błąd podczas uploadowania pliku!<\/span><br/><br/>';
      }
      document.getElementById('f1_upload_process').style.visibility = 'hidden';
      document.getElementById('f1_upload_form').innerHTML = result + '<label>File: <input name="myfile" type="file" size="30" /><\/label><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /><\/label>';

      document.getElementById('f1_upload_form').style.visibility = 'visible';      
      return true;   
}

//-->
</script>   
</head>

<body>
<div id='myFile'></div>
       <div id="container">
            <div id="header"><div id="header_left"></div>
            <div id="header_main">AJAX UPLOADER</div><div id="header_right"></div></div>
            <div id="content">
                <form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
                     <p id="f1_upload_process">Loading...<br/><img src="loader.gif" /><br/></p>
                     <p id="f1_upload_form" align="center"><br/>
                         <label>File:  
                              <input name="myfile" type="file" size="30" />
                         </label>
                         <label>
                             <input type="submit" name="submitBtn" class="sbtn" value="Upload" />
                         </label>
                     </p>
                     
                     <iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
                 </form>
             </div>
             <div id="footer"><a href="http://funkcje.net" target="_blank">http://funkcje.net</a></div>
         </div>
                 
</body>

Tak wiec mam takie dwa pliki i wszystko dziala ok wrzoca plik , tylko ze nie mam pojecia jak wyswietlic ten plik po zaladowaniu tej stronie niezalznmie gdzie

0

W tym przypadku zmienna @@$target_path@@ zawiera sciezke do pliku, ktory zostal wlasnie zaladowany na serwer, prawda?
Wiec nie wiem, w czym tkwi problem?

W skrypcie PHP zwracasz po prostu wartosc zmiennej @@$target_path@@, tak, aby w kodzie JS wyswietlic jej zawartosc.

Dodam jeszcze, ze powinienes zabezpieczyc swoj skrypt przez uploadowaniem plikow takich jak .php, .cgi, .exe, .pl i innych potencjalnie niebezpiecznych. Innymi slowy - powinienes dopusczac na serwer tylko okreslone rodzaje plikow. W tym celu mozesz sprawdzac ich rozszerzenie oraz/lub ich typ MIME.

0 
 function stopUpload(success){
      var result = '';
      if (success == 1){
         result = '<span class="msg">Plik został załadowany!<\/span><br/><br/>';
      }
      else {
         result = '<span class="emsg">Błąd podczas uploadowania pliku!<\/span><br/><br/>';
      }
      document.getElementById('f1_upload_process').style.visibility = 'hidden';
      document.getElementById('f1_upload_form').innerHTML = result + '<label>File: <input name="myfile" type="file" size="30" /><\/label><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /><\/label>';
      document.getElementById('myFile').innerHTML = '<img src=<?php echo $target_path; ?> />';
      document.getElementById('f1_upload_form').style.visibility = 'visible';      
      return true;   
}

wstawilem cos takiego w tej funkcji i nie dziala

no nic probowalem jzu chyba na wszsytkie sposoby to zrobic i nic nie dziala jak powinno

0

W pliku upload.php powinieneś zapisać więcej informacji na tema wysłanego pliku

Ja bym to przerobił na coś takiego:

<?php
   // Edit upload location here
   $destination_path = getcwd().DIRECTORY_SEPARATOR;
 
   $result = array('success'=>0);
 
   $target_path = $destination_path . basename( $_FILES['myfile']['name']);
 
   if(@move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
 
                   $result['success'] = 1;
                   $result['fileInfo'] = $target_path;
        } 
 
   sleep(1);
?>
 
<script language="javascript" type="text/javascript">window.top.window.stopUpload(<?php echo json_encode($result); ?>);</script>

Potem w kodzie JS:

 
function stopUpload(success){
      var result = '';
      if (success.success == 1){
         // możesz też wyswietlić go jak np obrazek '<img src="' + success.fileInfo + '" />'
         result  = '<span class="msg">Plik został załadowany!<br />';
         result += 'Lokalizacja pliku: ' + success.fileInfo + '<\/span><br/><br/>';
      }
      else {
         result = '<span class="emsg">Błąd podczas uploadowania pliku!<\/span><br/><br/>';
      }
      document.getElementById('f1_upload_process').style.visibility = 'hidden';
      document.getElementById('f1_upload_form').innerHTML = result + '<label>File: <input name="myfile" type="file" size="30" /><\/label><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /><\/label>';
 
      document.getElementById('f1_upload_form').style.visibility = 'visible';      
      return true;   
}

Z lekkimi modyfikacjami co do wyglądu HTML powinno działać (nie testowałem - pisałem z palca)

0

Zrobilem jak pisales ale wyskakuje undefined ?????

0

polecam :

console.log(result)

i zobaczenie co się dzieje w konsoli Firefoxa czy Chrome
To co napisałem to tylko wypociny napisane z palca, nie wiem czy to zadziała, chciałem tylko wskazać drogę jakby to można rozwiązać

pokombinuj, na pewno się uda

0

sam juz nie wiem , mecze sie z tym caly dzien i nic nie dziala jak powinno
moze po porstu ktos zna jakis dobry prosciutki uploader

0

Ok. Sprawdziłem kod. Wrzuciłem sobie to co tu zaserwowałes w jakiś testowy framework na lokalu i działa. oto całość:

Widok (html + wstawki php):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Funkcje.net Ajax UPLOADER</title>
   <link href="style/style.css" rel="stylesheet" type="text/css" />
 
<script language="javascript" type="text/javascript">
<!--
function startUpload(){
      document.getElementById('f1_upload_process').style.visibility = 'visible';
      document.getElementById('f1_upload_form').style.visibility = 'hidden';
      return true;
}
 
function stopUpload(s){
	console.log(s);
      var result = '';
      if (s.success == 1){
         result = '<span class="msg">Plik został załadowany!<\/span><br/><br/>';
		 result += '<img src="<?=base_url()?>' + s.fileInfo + '" />';
      }
      else {
         result = '<span class="emsg">Błąd podczas uploadowania pliku!<\/span><br/><br/>';
      }
      document.getElementById('f1_upload_process').style.visibility = 'hidden';
      document.getElementById('f1_upload_form').innerHTML = result + '<label>File: <input name="myfile" type="file" size="30" /><\/label><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /><\/label>';
 
      document.getElementById('f1_upload_form').style.visibility = 'visible';      
      return true;   
}
 
//-->
</script>   
</head>
 
<body>
<div id='myFile'></div>
       <div id="container">
            <div id="header"><div id="header_left"></div>
            <div id="header_main">AJAX UPLOADER</div><div id="header_right"></div></div>
            <div id="content">
                <form action="<?=base_url()?>upload" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
                     <p id="f1_upload_process">Loading...<br/><img src="loader.gif" /><br/></p>
                     <p id="f1_upload_form" align="center"><br/>
                         <label>File:  
                              <input name="myfile" type="file" size="30" />
                         </label>
                         <label>
                             <input type="submit" name="submitBtn" class="sbtn" value="Upload" />
                         </label>
                     </p>
 
                     <iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
                 </form>
             </div>
             <div id="footer"><a href="http://funkcje.net" target="_blank">http://funkcje.net</a></div>
         </div>
 
</body>

Kod:

<?=base_url()?>

to nic innego jak wyświetlenie adresu głównego strony (np: http://www.example.pl) - wstaw tutaj coś swojego (nie wiem czego tam używasz)

Kod PHP:

$destination_path = 'tmp/';
		$result = array('success'=>0);
		$target_path = $destination_path . basename( $_FILES['myfile']['name']);
		if(@move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
			$result['success'] = 1;
			$result['fileInfo'] = $target_path;
		} 
 
		echo '<script language="javascript" type="text/javascript">window.top.window.stopUpload(' . json_encode($result) . ');</script>';

W "$destination_path" ustawiłem sobie katalog tymczasowy - tutaj przypisz jakąś swoją ścieżkę. Reszta bajecznie prosta.

Działa pod FF,Chrome i IE9/8

Możliwe że masz problem z katalogiem do którego zapisujesz plik, jak nie ma praw zapisu to z tego powodu może pokazywać się w konsoli 'undefined'
Kombinuj bracie, kombinuj

0

musial minac rok :) wielkie dzieki za kodzik, dzial wszystko
nawet nie pamietam do czego to potrzebowalem i teraz znowu to samo ;)
masz u mnie browarka

1 użytkowników online, w tym zalogowanych: 0, gości: 1