Ajax, php ve jquery ile birden fazla dosya upload

2 Cevap php

Ben kullanıcı başka bir sayfaya yönlendiriliyorsunuz olmadan kendi resim yüklemek için kullanabileceğiniz bir çok dosya upload form inşa ediyorum.

The pseudo code as follow:
    1. prompt user to create new album and redirect them to the addphoto.php page.
    2. at the addphoto.php page user can pick their pictures to upload without going further to other pages by using iframe.
        2.1. When user put their pictures into the file input, it will be automatically uploaded by using `onchange()` (call $('input[type=file]').change() in jquery)
        2.2. First, php code will check the uploaded file for validation (type, max size,..)
        2.2. Then, it will add the image to the sql database and return the ID of the picture added.
        2.3. Rename the image according to the userid, albumid, photoid and time uploaded.
        2.4. Move the picture to photo folder, resize to get the thumbnail and move the thumbnail to the thumb folder
        2.5. Update new name in sql database.
    3. After calling $('input[type=file]').change() to submit the file, I proceed to get the picure information in sql database by using ajax and then append to the current page.

Sorun doğru (). Değişiklik (form.submit ()) $ çağrıldıktan sonra resim bilgi almak için bu yüzden bazen eski adı resim birini adını sonra değil döndürür. (Ben bile bu şekilde de olur, geciktirmek php sleep () fonksiyonu kullanılır.

İşte JjQuery kodu:

$(document).ready
(
   function()
   {
      $("input[type=file]").change
      (
        function($e)
 {
    $("form").submit(); 
    $(this).val("");
    var user = $('#userID').val();
    var albumid = $('#albumid').val();
    $.get
    (
       "ajaxhandle.php",
       {ref: "getlastedimg", uid: user, aid: albumid},
       function ($xml)
      {
  $xml = $($xml);
  if ($xml.find("success").text() == 1)
  {
      var imgid  = $xml.find("imgid").text();
      var imgpath = "photos/album/" + $xml.find("imgname").text();
      var user  = $xml.find("user").text();
      var album  = $xml.find("album").text();
      var html = "<div class='photoReview'><div class='photoReviewCaption'><table><tr><td>Caption</td><td><textarea style='width:200px; height:50px' class='imgCaption'></textarea></td><tr><td>In this photo</td><td>No one<br/>Click on the picture to tag peopel</td></tr></table></div>";
      html += "<div class='photoReviewImg'><img src='" + imgpath +"' /><div><input type='radio' name='albumcover' /><label for='albumcover'>This is the album cover</label><br /><a href=''>Remove this picture</a></div></div></div><div style='clear:both; margin-bottom:15px'></div>";
     $("#photoReview").prepend(html);
  }
  else
  {
     alert($xml);
  }
 },
       'xml'
 );
    }
);

There is nothing wrong with upload image php code, it runs smoothly: ajaxhand.php code as follow:

if ($_GET["ref"] == "getlastedimg")
{
    sleep(2);
    $user = $_GET["uid"];
    $album = $_GET["aid"];
    $img = Image::getLastedImage($user, $album);

    if ($img)
    {
 header("Content-Type: application/xml charset=ISO-8859-1"); 
 echo "<?xml version='1.0' encoding='UTF-8' standalone='yes' ?>";
 echo "<image>";
 echo "<success>1</success>";
 echo "<imgid>"   . $img["photoid"]    .  "</imgid>";
 echo "<imgname>"  . $img["photoname"]  .  "</imgname>";
 echo "<user>"   . $img["userid"]     .  "</user>";
 echo "<album>"   . $img["photoalbum"] .  "</album>";
 echo "<date>"   . $img["timeupload"] .  "</date>";
 echo "</image>";
    }
}

2 Cevap

Ben bu sorunun kaynağı olmadığından emin değilim, ama ben iki öneri, sizin javascript için bir, ve php için bir tane yapmak istiyorum:

Lütfen javascript için, bu girişin değişim statüsü dışında bir şey tarafından tetiklenen yükleme var. Ben sadece şişman parmaklarına sahip ve yeniden denemek için almadan önce hatayı geri almak için bir sürü adımlar yoluyla gitmek zorunda yanlış dosyayı seçerseniz ben nefret ederim. Ajax tetikleyen basit bir <button> girişi var. Ayrıca bu ihtiyacı ne alır sonra jquery dosya girişinde metni temizlemek için yardımcı olabilir. Senin sorunun, belirtmek gibi, bu olayı kullanarak nedeniyle ise, bu bu ve diğer potansiyel kullanıcı ilgili hataları ton düzeltmek istiyorum.

Artı, kullanıcıların arka arkaya 10 dosyaları seçmek için izin ve toplu yükleme yapmanın yerine bir defada bir ajax isteği yapmak için kapıyı açar.

İkinci olarak, php için ...

Ben komut geçerli sayfayı ekler tam bir başlık ve html ile cevap olmazdı. Bu biri için, güvenilir değil; iki için, bunu yapmanın tipik bir yol değildir; ve daha da önemlisi, bu gerekli değildir.

Bunun yerine, neden jquery bunu değil? PHP sürümünüz 5 büyükse, çok kolay kolları jquery, json içine diziler dönüştürme yeteneğine sahip. Sadece resim bilgileri array bir nesnenin içine jquery de-serialze, json zorunda çevirdim, ve sonra istediğiniz yere DOM'ye bilgi eklemek ve hatta tekrar başvurmak gerekir (ve dolayısıyla bir DOM önlemek durumda saklayın Dediğin gibi, yanlış olabilir bilgi,) için sorgu.

Umarım bu yardımcı olur

i really suggest use Uploadify jQuery component. It will save your time. And make possible show upload progress ... as ex.

Arsen