2013-07-26 66 views
0

我知道我沒有安裝uploadprogress擴展的問題,因爲當我嘗試這個非常簡單的教程:http://www.ultramegatech.com/2010/10/create-an-upload-progress-bar-with-php-and-jquery/,它工作得很漂亮!uploadprogress_get_info正確安裝,但不能用不同的代碼工作

然後我調整它只是有一個非常簡單的(而不是jQuery-UI)進度欄,這也工作。這裏的工作代碼:

upload_getprogress.php:

<?php 

    if (isset($_GET['uid'])) { 
     $status = uploadprogress_get_info($_GET['uid']); 
     if ($status) { 
      echo round($status['bytes_uploaded']/$status['bytes_total']*100); 
     } 
     else { 
      echo 100; 
     } 
    } 
    ?> 

upload_form.php:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Upload Something</title> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
     <style> 
      #progress-bar, #upload-frame { 
       display: none; 
      } 
     </style> 
     <script> 
      (function ($) { 
       var pbar; 
       var started = false; 

       $(function() { 
        $('#upload-form').submit(function() { 
         $('#upload-form').hide(); 
         pbar = $('#progress-bar'); 
         pbar.show(); 
         $('#upload-frame').load(function() { 
          started = true; 
         }); 

         setTimeout(function() { 
          updateProgress($('#uid').val()); 
         }, 1000); 
        }); 
       }); 

       function updateProgress(id) { 
        var time = new Date().getTime(); 
        $.get('upload_getprogress.php', { uid: id, t: time }, function (data) { 
         var progress = parseInt(data, 10); 
         if (progress < 100 || !started) { 
          started = progress < 100; 
          updateProgress(id); 
         } 
         started && $('#inner').css('width', progress+ "%"); 
        }); 
       } 
      }(jQuery)); 
     </script> 
     <style> 
     #progress-bar 
     { 
     height:50px; 
     width:500px; 
     border:2px solid black; 
     background-color:white; 
     margin:20px; 
     } 
     #inner 
     { 
     height:100%; 
     background-color:orange; 
     width:0%; 
     } 
     </style> 
    </head> 
    <body> 
     <form id="upload-form" 
       method="post" 
       action="upload.php" 
       enctype="multipart/form-data" 
       target="upload-frame" > 
      <input type="hidden" 
        id="uid" 
        name="UPLOAD_IDENTIFIER" 
        value="<?php echo $uid; ?>" > 
      <input type="file" name="file"> 
      <input type="submit" name="submit" value="Upload!"> 
     </form> 
     <div id="progress-bar"><div id='inner'></div> 
     <iframe id="upload-frame" name="upload-frame"></iframe> 
    </body> 
</html> 

所有罰款和花花公子,沒有任何問題!所以我知道一個事實,我設置uploadprogress擴展的方式沒有任何問題。

但是,成功完成演示後,我需要將其集成到我的JavaScript和jQuery密集型Web應用程序中,其中包括文件上載。

現在,當我嘗試它時,我從uploadprogress_get_info()函數中獲得「NULL」。爲什麼? 在我的申請頁面中,我的圖片上傳表格是動態創建的。但在我的網頁的開始(和之前用戶點擊一個按鈕,動態創建的圖像上傳表單),我使用這一行:

<input type='hidden' name='UPLOAD_IDENTIFIER' id='uid' value='<?php echo md5(uniqid(mt_rand())); ?>' /> 

這是什麼問題?有沒有一個特定的時間或地點這個隱藏的輸入應該存在?

包括在我的頁面的頂部上面的行之前,我還加入了一個長.js文件,其中包括了一堆jQuery插件,但與下面的代碼開始:

  var started = false; 

      function updateProgress(id) { 
      console.log("updating progress"); // this msg appears, so i know i'm getting this far 
       var time = new Date().getTime(); 

       $.get('upload_getprogress.php', { uid: id, t: time }, function (data) { 
        var progress = parseInt(data, 10); 

        if (progress < 100 || !started) { 
         started = progress < 100; 
         updateProgress(id); 

        } 
        //started && pbar.progressbar('value', progress); 
        $('#inner').css('width', progress+ "%"); 

       }); 

      } 

      // a lot more functions, then: 
      function imageDialog(imgtype, x, y, editsource) { 
      // this function dynamically generates a dialog for image uploading 
      // which shows up when a user hits an "image upload" button 
      // there's lots of code that creates a new form which is assigned to $imgform 
      // lots of elements and a couple of iframes are appended to $imgform 
      // then finally: 

      $imgform.submit(function() { 
     pbar = $('#progress-bar'); 
     $('#inner').css('width', "0%"); 
     pbar.show(); 
     started = true; 
     setTimeout(function() { 
         updateProgress($('#uid').val()); 
        }, 1000); 
    }); 

     /* other irrelevant stuff */ 

      } 

然而,當上傳進度條按預期顯示時,它永遠不會增加。

所以我編輯了upload_getprogress.php看起來像這樣:

if (isset($_GET['uid'])) { 
    $uid = $_GET['uid']; 
     //$status = uploadprogress_get_info($_GET['uid']); 
    echo "progress for $uid is: ".uploadprogress_get_info($uid); 
} 

在Firefox中,我可以看到Ajax調用的響應,和我所得到的來自upload_getprogress.php輸出是:

progress for 6e728b67bd526bceb077c02231d2ec6f is: 

我企圖把$status成一個變量,並輸出到文件,並將該文件說:

the current uid: 02e9a3e0214ffd731265ec5b0b220b4c 
the current status: NULL 

所以基本上,狀態一直返回NULL。爲什麼?這是(並且仍然)在演示中工作正常,在將其集成到我的Web應用程序代碼時會出現什麼問題?自行上傳圖片沒有任何問題 - 我的圖片上傳正常,但進度未得到跟蹤!

是會動態創建的形式如下:

<div class="dialog-container"> 
<form id="imgform" method="post" enctype="multipart/form-data" action="upload_1-img.php" target="upload_target"> 
Select image: 
<br> 
<input id="image" type="file" name="image"> 
<div id="imgwrapper"></div> 
<input id="filename" type="hidden" value="" name="filename"> 
<input id="upath" type="hidden" value="xxxxxxxxxxxxxxxxxxxxxxxxxx" name="upath"> 
<center> 
<input id="imgupload" type="submit" onclick="showUploadedItem()" value="Upload"> 
<input id="clearcrop" type="button" disabled="disabled/" value="Clear selection"> 
<input id="imgapproved" type="button" disabled="disabled" value="Done"> 
<input id="imgcancel" type="button" value="Cancel"> 
</center> 
</form> 
</div> 
<div id="progress-bar"><div id='inner'></div></div> 
<!-- etc etc some other elements --> 
</div> 

和我自己的upload_1-IMG。PHP開始於:

$filename = $_FILES["image"]["tmp_name"];  
    $file_info = new finfo(FILEINFO_MIME); 
    $bfr = $file_info->buffer(file_get_contents($filename)) or die ("error"); 
    // some more stuff, getting file type and file's $name 
    if(/* a bunch of conditions */) 
     move_uploaded_file($_FILES["image"]["tmp_name"], $upath . "/" . $name); 

回答

0

嗚呼!我想通了,多虧了這個錯誤:

https://bugs.php.net/bug.php?id=57505

基本上,只要我刪除從那裏得到用戶上傳文件的頁面這個靜態行:

<input type='hidden' name='UPLOAD_IDENTIFIER' id='uid' value='<?php echo md5(uniqid(mt_rand())); ?>' /> 

,並在我的JavaScript函數,動態創建圖像對話框,我只是在生成文件輸入的行上方動態添加隱藏的輸入。

所以動態創建的形式相關的部分則看起來像:

<input type='hidden' name='UPLOAD_IDENTIFIER' id='uid' value='1325a38f3355c0b1b4' /> 
<input id="image" type="file" name="image"> 

現在,因爲這是通過JavaScript得到動態創建的,無論如何,我可以代替上面隨機JS函數值。

現在進度條正在向前推進,因爲它應該! :D