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:
  1. <form action='galeria_admin.php?todo=kep_feltolt' method='POST' enctype='multipart/form-data'>  
  2.   <fieldset  style='padding: 2; width: 323px;'>  
  3.     <legend>Kép feltöltés</legend>  
  4.     <table border='0' width='319' cellspacing='0' cellpadding='0'>  
  5.        <tr>  
  6.           <td width='118' height='30' valign='bottom'>A feltöltendő kép:</td>  
  7.           <td width='201' valign='bottom'><input class='main' type='file' name='p_file' style='width: 190px;'></td>  
  8.        </tr>  
  9.        <tr>  
  10.           <td colspan='2' align='center'><i><font color='#ffc560'>Csak jpg, bmp, gif, png kép!</font></i></td>  
  11.        </tr>  
  12.        <tr>  
  13.          <td>Komment:</td>  
  14.          <td>  
  15.            <input class='main' type='text' name='comment' style='width: 190px;'>  
  16.            <input type='hidden' name='src' value='images'>  
  17.          </td>  
  18.          </tr>  
  19.          <tr>  
  20.            <td colspan='2'>  
  21.              <fieldset style='padding: 2; width:319px; height:120px'>  
  22.                 <legend>Album</legend>  
  23.                 <table  cellspacing='0' cellpadding='0' width='100%' height='107'>  
  24.                    <tr style='border-bottom: solid;'>  
  25.                       <td width='114'>Meglévő album:</td>  
  26.                       <td>  
  27.                         <select class='main' name='album' style='width: 190px;' tabindex='1'>  
  28.                          <option value='1'>Természet</option>  
  29.                          <option value='2'>Templom, Szűz Mária kegyhely</option>  
  30.                          <option value='3'>Saját készítéseim</option>  
  31.                        </select>  
  32.                      </td>  
  33.                    </tr>  
  34.                    <tr>  
  35.                      <td>Új album:</td>  
  36.                      <td><input class='main' type='text' name='uj_album' style='width: 190px;'></td>  
  37.                    </tr>  
  38.                    <tr>  
  39.                       <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>  
  40.                    </tr>  
  41.                  </table>  
  42.                </fieldset>  
  43.             </td>  
  44.          </tr>  
  45.          <tr>  
  46.             <td height='50' colspan='2' valign='bottom' align='center'><input type='submit' value='Feltöltés'></td>  
  47.          </tr>  
  48.       </table>  
  49.    </fieldset>  
  50. </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:
  1. (function($){  
  2. ...     
  3.    $.fn.submitForm=function(){  
  4.       $("#tartalom").delegate("form", "submit", function(){  
  5.          var link=$(this).attr("action");  
  6.          var method=$(this).attr("method");  
  7.          var enc=$(this).attr("enctype");  
  8.          method=(method)?method:"POST";  
  9.          $.ajax({  
  10.             type:method,  
  11.             url:link,  
  12.             data:$(this).serialize(),  
  13.             beforeSend: function(d,s){  
  14.                 $(".loading").fadeIn("slow", function(){  
  15.                     $(".loading").css("display","block");  
  16.                 });  
  17.             },  
  18.             success:function(html){  
  19.                $("#tartalom").html(html);  
  20.             },  
  21.             error:function(XMLHttpRequest,textStatus,errorThrown){  
  22.                $("#tartalom").load("lib/error.php");  
  23.                return false;  
  24.             },  
  25.             complete: function(d,s){  
  26.                $(".loading").fadeOut("slow", function(){  
  27.                   $(".loading").css("display","none");  
  28.                });  
  29.             }  
  30.          });  
  31.          return false;  
  32.       });  
  33.   
  34.       $("#admin").delegate("form", "submit", function(){  
  35.          var link=$(this).attr("action");  
  36.          var method=$(this).attr("method");  
  37.          method=(method)?method:"POST";  
  38.          $.ajax({  
  39.             type:method,  
  40.             url:link,  
  41.             data:$(this).serialize(),  
  42.             success:function(html){  
  43.                $("#admin").fadeOut("slow", function(){  
  44.                   $("#admin").fadeIn("slow").html(html);  
  45.                });  
  46.             },  
  47.             error:function(XMLHttpRequest,textStatus,errorThrown){  
  48.                $("#tartalom").load("lib/error.php");  
  49.                return false;  
  50.             }  
  51.          });  
  52.          return false;  
  53.       });  
  54.    }     
  55. })(jQuery);  
  56.   
  57. function my_show(link){  
  58.    $.ajax({  
  59.       type: "GET",  
  60.       url: link,  
  61.       data: "",  
  62.       beforeSend: function(d,s){  
  63.          $(".loading").fadeIn("slow", function(){  
  64.             $(".loading").css("display","block");  
  65.          });  
  66.       },  
  67.       success: function(html){  
  68.          $("#tartalom").fadeOut("slow", function(){  
  69.             $("#tartalom").fadeIn("slow").html(html);  
  70.          });  
  71.       },  
  72.       error: function(XMLHttpRequest,textStatus,errorThrown){  
  73.          $("#tartalom").fadeOut("slow", function(){  
  74.             $("#tartalom").fadeIn("slow").load("lib/error.php");  
  75.          });  
  76.       },  
  77.       complete: function(d,s){  
  78.          $(".loading").fadeOut("slow", function(){  
  79.             $(".loading").css("display","none");  
  80.          });  
  81.       }  
  82.    });  
  83. }  
  84.   
  85. function show_admin(link){  
  86.    $.ajax({  
  87.       type: "GET",  
  88.       url: link,  
  89.      data: "",  
  90.       success: function(html){  
  91.          $("#admin").fadeOut("slow", function(){  
  92.             $("#admin").fadeIn("slow").html(html);  
  93.          });  
  94.       },  
  95.       error: function(XMLHttpRequest,textStatus,errorThrown){  
  96.          $("#tartalom").fadeOut("slow", function(){  
  97.             $("#tartalom").fadeIn("slow").load("lib/error.php");  
  98.          });  
  99.       }  
  100.    });  
  101. }  
  102.   
  103. $(document).ready(function(){  
  104.    $("a").clickLoad();  
  105.    $('#myForm').bind('submit', function() {  
  106.       $(this).ajaxSubmit({  
  107.          target: '#output'  
  108.       });  
  109.       return false; // <-- important!  
  110.    });  
  111.    $(".norm").submitForm();  
  112.    show_admin("admin/admin.php");  
  113.    my_show("pages/page.php?page=nagyterem");  
  114. });  
A php script:
  1. ...  
  2.         setcookie("page",$todo,time()+3600,"/");  
  3.     echo "<script type='text/javascript' src='js/form.js'></script>";  
  4.     $borderdata = "<form id='myForm' action='admin/upload.php' method='POST' enctype='multipart/form-data'>    
  5.    <fieldset  style='padding: 2; width: 323px;'>    
  6.       <legend>Kép feltöltés</legend>    
  7.       <table border='0' width='319' cellspacing='0' cellpadding='0'>    
  8.          <tr>    
  9.             <td width='118' height='30' valign='bottom'>A feltöltendő kép:</td>    
  10.             <td width='201' valign='bottom'><input class='main' type='file' name='p_file' style='width: 190px;'></td>    
  11.          </tr>    
  12.          <tr>    
  13.             <td colspan='2' align='center'><i><font color='#ffc560'>Csak jpg, bmp, gif, png kép!</font></i></td>    
  14.          </tr>  
  15.          <tr>    
  16.             <td height='50' colspan='2' valign='bottom' align='center'><input type='submit' value='Feltöltés'></td>    
  17.          </tr>    
  18.       </table>    
  19.    </fieldset>    
  20. </form>  
  21. Output:  
  22. <div id='output'></div>  
  23. ";  
  24. ...  
(A $borderdata egy keretbe teszi a formot)
A jquery 1.4.2 az index.php tölti be.

upload.php:
  1. <?php  
  2. require_once("../lib/init.php");  
  3. require_once("../lib/string.php");  
  4.   
  5. $file_name = strtolower($_FILES['name']);  
  6. $file_name = str_replace(' ', '_', $file_name);  
  7. $file_tmp = $_FILES['tmp_name'];  
  8.   
  9. if($_COOKIE['page'] == "images"){  
  10.     $table = $config['sql']['prefix']."galeria_kep";  
  11. }  
  12.   
  13. echo "<br><br>Tábla: ".$table." / Cookie: ".$_COOKIE['page']." / File name: ".$_FILES['name']."<br>";  
  14.   
  15. $eredmeny   = mysql_query("SELECT * FROM ".$table) or die(mysql_error());  
  16.   
  17. if(mysql_num_rows($eredmeny) != 0){  
  18.     $kep_db = mysql_num_rows($eredmeny) + 1 or die($err1.mysql_error());  
  19. }else{  
  20.     $kep_db = 1;  
  21. }  
  22. if($kep_db <= 9999) $file_sor = "";  
  23. if($kep_db <= 999) $file_sor = "0";  
  24. if($kep_db <= 99) $file_sor = "00";  
  25. if($kep_db <= 9) $file_sor = "000";  
  26. $album = karakter_csere($_COOKIE['page']);  
  27. $frames = explode(".", $file_name);  
  28. $number = count($frames) - 1;  
  29. $func = $frames[$number];  
  30.   
  31. $uj_nev = $_COOKIE['page']."_".$file_sor.$kep_db.".".$func;  
  32. $thumb_file = "thumb_".$uj_nev;  
  33. $dir = "/galeria/".$_COOKIE['page']."/";  
  34. $thumb_dir = $dir."thumb/";  
  35.   
  36. if (move_uploaded_file($file_tmp,$dir.$uj_nev)){  
  37.     chmod($dir.$uj_nev,0777);  
  38.     copy($dir.$uj_nev, $thumb_dir.$thumb_file);  
  39.     chmod($thumb_dir.$thumb_file,0777);  
  40.     image_resize($dir.$uj_nev, "800", "600");  
  41.     image_resize($thumb_dir.$thumb_file, "96", "128");  
  42. }  
  43. ?>  
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.