为jquery ajax文件上传添加进度条答案

【问题标题】：add progress bar to jquery ajax file upload为jquery ajax文件上传添加进度条
【发布时间】：2014-07-28 22:39:59
【问题描述】：

嘿，我正在使用 ajax 上传图片。代码如下。

index.php

<html>
<head>
</head>

<script src="js/jquery.min.js"></script>
<script src="js/jquery.wallform.js"></script>
<script>
 $(document).ready(function() { 

            $('#photoimg').die('click').live('change', function()           { 
                       //$("#preview").html('');

                $("#imageform").ajaxForm({target: '#preview', 
                     beforeSubmit:function(){ 

                    console.log('ttest');
                    $("#imageloadstatus").show();
                     $("#imageloadbutton").hide();
                     }, 
                    success:function(){ 
                    console.log('test');
                     $("#imageloadstatus").hide();
                     $("#imageloadbutton").show();
                    }, 
                    error:function(){ 
                    console.log('xtest');
                     $("#imageloadstatus").hide();
                    $("#imageloadbutton").show();
                    } }).submit();


            });
        }); 
</script>

<style>

body
{
font-family:arial;
}

#preview
{
color:#cc0000;
font-size:12px
}
.imgList 
{
max-height:150px;
margin-left:5px;
border:1px solid #dedede;
padding:4px;    
float:left; 
}

</style>
<body>

<div>

<div id='preview'>
</div>

<form id="imageform" method="post" enctype="multipart/form-data" action='ajaxImageUpload.php' style="clear:both">
<h1>Upload your images</h1> 
<div id='imageloadstatus' style='display:none'><img src="loader.gif" alt="Uploading...."/></div>
<div id='imageloadbutton'>
<input type="file" name="photos[]" id="photoimg" multiple />
</div>
</form>


</div>
</body>
</html>

ajaxImageUpload.php

<?php
error_reporting(0);
session_start();

$session_id='1'; //$session id
define ("MAX_SIZE","9000"); 
function getExtension($str)
{
         $i = strrpos($str,".");
         if (!$i) { return ""; }
         $l = strlen($str) - $i;
         $ext = substr($str,$i+1,$l);
         return $ext;
}


$valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") 
{

    $uploaddir = "uploads/"; //a directory inside
    foreach ($_FILES['photos']['name'] as $name => $value)
    {

        $filename = stripslashes($_FILES['photos']['name'][$name]);
        $size=filesize($_FILES['photos']['tmp_name'][$name]);
        //get the extension of the file in a lower case format
          $ext = getExtension($filename);
          $ext = strtolower($ext);

         if(in_array($ext,$valid_formats))
         {
           if ($size < (MAX_SIZE*1024))
           {
           $image_name=time().$filename;
           echo "<img src='".$uploaddir.$image_name."' class='imgList'>";
           $newname=$uploaddir.$image_name;

           move_uploaded_file($_FILES['photos']['tmp_name'][$name], $newname);


           }
           else
           {
            echo '<span class="imgList">You have exceeded the size limit!</span>';

           }

          }
          else
         { 
            echo '<span class="imgList">Unknown extension!</span>';

         }

     }
}
echo $uploaddir.$image_name;
?>

现在它在上传图像时会显示一个动画 gif。我想要做的是删除 gif 并用进度条替换它，但我不知道如何做到这一点，我在一个时间表上。谁能告诉我该怎么做。谢谢！

【问题讨论】：

使用库：jQuery File Upload 或 plupload.com。为进度条创建反馈机制比单独更改 gif 需要更多的工作。既然你有时间安排，我认为这里没有人会为你做，我建议，使用图书馆

标签： php ajax upload progress-bar

【解决方案1】：

在整个文件上传之前，用于处理上传的 PHP 代码不会运行，因此您无法检测到该脚本中上传了多少文件。

通常，您会发现上传进度条内置在浏览器或某些“客户端”程序（如 Flash 应用程序）中，可以控制传输级别。

对于严格的 PHP 和 Javascript 实现，有一些变通方法很脆弱，需要大量工作，而且不是很常见（因此您在这里问）。有一些 jQuery 插件可以做到这一点http://plugins.jquery.com/uploadfile/。

【讨论】：

不写信息可以检测上传的文件块