ugrás a tartalomhoz

Ajax file feltöltés

thelol · 2010. Szep. 24. (P), 17.39
Sziasztok!


Egy olyan problémával kerültem szembe, hogy a weblap amin dolgozok, a formokat, és linkeket Ajax-al dolgozza fel. Most viszont képet is fel kellene töltenem. Az interneten már több megoldást találtam, de sajna mihelyt beillesztettem a az oldalaimba a scripteket, már nem, vagy csak nagyon hiányosan működnek. Hogy lehet rávenni az Ajaxot, hogy képet is lehessen feltölteni?
Az űrlap ennyiből áll:

<form action='galeria_admin.php?todo=kep_feltolt' method='POST' enctype='multipart/form-data'>
  <fieldset  style='padding: 2; width: 323px;'>
    <legend>Kép feltöltés</legend>
    <table border='0' width='319' cellspacing='0' cellpadding='0'>
       <tr>
          <td width='118' height='30' valign='bottom'>A feltöltendő kép:</td>
          <td width='201' valign='bottom'><input class='main' type='file' name='p_file' style='width: 190px;'></td>
       </tr>
       <tr>
          <td colspan='2' align='center'><i><font color='#ffc560'>Csak jpg, bmp, gif, png kép!</font></i></td>
       </tr>
       <tr>
         <td>Komment:</td>
         <td>
           <input class='main' type='text' name='comment' style='width: 190px;'>
           <input type='hidden' name='src' value='images'>
         </td>
         </tr>
         <tr>
           <td colspan='2'>
             <fieldset style='padding: 2; width:319px; height:120px'>
                <legend>Album</legend>
                <table  cellspacing='0' cellpadding='0' width='100%' height='107'>
                   <tr style='border-bottom: solid;'>
                      <td width='114'>Meglévő album:</td>
                      <td>
                        <select class='main' name='album' style='width: 190px;' tabindex='1'>
                         <option value='1'>Természet</option>
                         <option value='2'>Templom, Szűz Mária kegyhely</option>
                         <option value='3'>Saját készítéseim</option>
                       </select>
                     </td>
                   </tr>
                   <tr>
                     <td>Új album:</td>
                     <td><input class='main' type='text' name='uj_album' style='width: 190px;'></td>
                   </tr>
                   <tr>
                      <td colspan='2' align='center' height='43'><i><font color='#ffc560'>Az 'Új album' kitöltése esetén a meglévő album választása figyelmen kívül lesz hagyva!</font></i></td>
                   </tr>
                 </table>
               </fieldset>
            </td>
         </tr>
         <tr>
            <td height='50' colspan='2' valign='bottom' align='center'><input type='submit' value='Feltöltés'></td>
         </tr>
      </table>
   </fieldset>
</form>
De még az is jó lenne ha a képet külön tölteném fel, és a kép elérését továbbadni a formnak, mert a képet feltöltés után forgatni lehet, illetve a végén egy sql táblába kerül be az elérése.

Előre is köszi a segítséget!
‹ Oldal review, böngészőoptimalizálás, kódolási konvenciók Hogy tegyek be háttérképet a hasábra? ›
 ■
1

AJAX

Poetro · 2010. Szep. 24. (P), 18.15
Egyetlen nagyon fontos dolgot kifelejtettél az egészből, ami az AJAX-hoz szükséges, ez pedig a JavaScript. És a fenti kódban egyetlen sor JavaScript-et nem látok, sőt még csak utalást sem arra, hogy milyen keretrendszert használsz. Amennyiben jQuery-t, akkor ajánlom a jQuery Form plugin-t, ami kezel fájl feltöltéseket is AJAX formokban. Példát is fogsz találni, hogyan kell feldolgozni az ilyen kéréseket a szerver oldalon PHP segítségével.
2

Igen jquery-t használok.

thelol · 2010. Szep. 24. (P), 20.24
Igen jquery-t használok. Azért nem volt utalás rá, mert teljesen letisztítottam a kódot... Hogy csak a problémás űrlap legyen. Átírogattam a formot kezelő kódot, de sajna nem akar még összejönni...

Az alap form kezelő kódom:

(function($){
...   
   $.fn.submitForm=function(){
      $("#tartalom").delegate("form", "submit", function(){
         var link=$(this).attr("action");
         var method=$(this).attr("method");
		 var enc=$(this).attr("enctype");
         method=(method)?method:"POST";
         $.ajax({
            type:method,
            url:link,
            data:$(this).serialize(),
			beforeSend: function(d,s){
				$(".loading").fadeIn("slow", function(){
					$(".loading").css("display","block");
				});
			},
            success:function(html){
               $("#tartalom").html(html);
            },
            error:function(XMLHttpRequest,textStatus,errorThrown){
               $("#tartalom").load("lib/error.php");
               return false;
            },
            complete: function(d,s){
               $(".loading").fadeOut("slow", function(){
                  $(".loading").css("display","none");
               });
            }
         });
         return false;
      });

      $("#admin").delegate("form", "submit", function(){
         var link=$(this).attr("action");
         var method=$(this).attr("method");
         method=(method)?method:"POST";
         $.ajax({
            type:method,
            url:link,
            data:$(this).serialize(),
            success:function(html){
               $("#admin").fadeOut("slow", function(){
                  $("#admin").fadeIn("slow").html(html);
               });
            },
            error:function(XMLHttpRequest,textStatus,errorThrown){
               $("#tartalom").load("lib/error.php");
               return false;
            }
         });
         return false;
      });
   }   
})(jQuery);

function my_show(link){
   $.ajax({
      type: "GET",
      url: link,
      data: "",
      beforeSend: function(d,s){
         $(".loading").fadeIn("slow", function(){
            $(".loading").css("display","block");
         });
      },
      success: function(html){
         $("#tartalom").fadeOut("slow", function(){
            $("#tartalom").fadeIn("slow").html(html);
         });
      },
      error: function(XMLHttpRequest,textStatus,errorThrown){
         $("#tartalom").fadeOut("slow", function(){
            $("#tartalom").fadeIn("slow").load("lib/error.php");
         });
      },
      complete: function(d,s){
         $(".loading").fadeOut("slow", function(){
            $(".loading").css("display","none");
         });
      }
   });
}

function show_admin(link){
   $.ajax({
      type: "GET",
      url: link,
     data: "",
      success: function(html){
         $("#admin").fadeOut("slow", function(){
            $("#admin").fadeIn("slow").html(html);
         });
      },
      error: function(XMLHttpRequest,textStatus,errorThrown){
         $("#tartalom").fadeOut("slow", function(){
            $("#tartalom").fadeIn("slow").load("lib/error.php");
         });
      }
   });
}

$(document).ready(function(){
   $("a").clickLoad();
   $('#myForm').bind('submit', function() {
      $(this).ajaxSubmit({
         target: '#output'
      });
      return false; // <-- important!
   });
   $(".norm").submitForm();
   show_admin("admin/admin.php");
   my_show("pages/page.php?page=nagyterem");
});
A php script:

...
        setcookie("page",$todo,time()+3600,"/");
	echo "<script type='text/javascript' src='js/form.js'></script>";
	$borderdata = "<form id='myForm' action='admin/upload.php' method='POST' enctype='multipart/form-data'>  
   <fieldset  style='padding: 2; width: 323px;'>  
      <legend>Kép feltöltés</legend>  
      <table border='0' width='319' cellspacing='0' cellpadding='0'>  
         <tr>  
            <td width='118' height='30' valign='bottom'>A feltöltendő kép:</td>  
            <td width='201' valign='bottom'><input class='main' type='file' name='p_file' style='width: 190px;'></td>  
         </tr>  
         <tr>  
            <td colspan='2' align='center'><i><font color='#ffc560'>Csak jpg, bmp, gif, png kép!</font></i></td>  
         </tr>
         <tr>  
            <td height='50' colspan='2' valign='bottom' align='center'><input type='submit' value='Feltöltés'></td>  
         </tr>  
      </table>  
   </fieldset>  
</form>
Output:
<div id='output'></div>
";
...
(A $borderdata egy keretbe teszi a formot)
A jquery 1.4.2 az index.php tölti be.

upload.php:

<?php
require_once("../lib/init.php");
require_once("../lib/string.php");

$file_name = strtolower($_FILES['name']);
$file_name = str_replace(' ', '_', $file_name);
$file_tmp = $_FILES['tmp_name'];

if($_COOKIE['page'] == "images"){
	$table = $config['sql']['prefix']."galeria_kep";
}

echo "<br><br>Tábla: ".$table." / Cookie: ".$_COOKIE['page']." / File name: ".$_FILES['name']."<br>";

$eredmeny	= mysql_query("SELECT * FROM ".$table) or die(mysql_error());

if(mysql_num_rows($eredmeny) != 0){
	$kep_db = mysql_num_rows($eredmeny) + 1 or die($err1.mysql_error());
}else{
	$kep_db = 1;
}
if($kep_db <= 9999) $file_sor = "";
if($kep_db <= 999) $file_sor = "0";
if($kep_db <= 99) $file_sor = "00";
if($kep_db <= 9) $file_sor = "000";
$album = karakter_csere($_COOKIE['page']);
$frames = explode(".", $file_name);
$number = count($frames) - 1;
$func = $frames[$number];

$uj_nev = $_COOKIE['page']."_".$file_sor.$kep_db.".".$func;
$thumb_file = "thumb_".$uj_nev;
$dir = "/galeria/".$_COOKIE['page']."/";
$thumb_dir = $dir."thumb/";

if (move_uploaded_file($file_tmp,$dir.$uj_nev)){
	chmod($dir.$uj_nev,0777);
	copy($dir.$uj_nev, $thumb_dir.$thumb_file);
	chmod($thumb_dir.$thumb_file,0777);
	image_resize($dir.$uj_nev, "800", "600");
	image_resize($thumb_dir.$thumb_file, "96", "128");
}
?>
3

jQuery Form plugin

Poetro · 2010. Szep. 25. (Szo), 02.11
Használd inkább az előbb említett plugint, ugyanis AJAX-szal nem lehet fájlokat küldeni. Már ha elolvastad az általam belinkelt két tartalmat, akkor ezt te is olvastad volna. És akkor lecserélheted a submitForm ál pluginedet pár sor jQuery-re.