Question

嘿，我正在使用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并用进度条替换它，但我不知道如何做到这一点，我在时间表上。有谁能请告诉我如何做到这一点。谢谢！

Answer 1

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

通常，您会在浏览器或某些“客户端”程序中找到上传进度条，例如可以控制该级别传输的Flash应用程序。

对于严格的PHP和Javascript实现，有一些易变的工作区和很多工作并且不常见（因此你在这里问的原因）。有一些jQuery插件可以执行此操作http://plugins.jquery.com/uploadfile/。

将进度条添加到jquery ajax文件上传

1 个答案: