uploadprogress_get_info已正确安装但无法在不同的代码中运行

时间:2013-07-26 16:30:39

标签: php javascript jquery ajax file-upload

我知道我在安装uploadprogress扩展时没有任何问题,因为当我尝试这个非常简单的教程:http://www.ultramegatech.com/2010/10/create-an-upload-progress-bar-with-php-and-jquery/时,它工作得很漂亮!

然后我稍微调整了一下它有一个非常简单(不是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密集型网络应用程序中,其中包括文件上传。

现在当我尝试它时,我从uploadprogress_get_info()函数得到“NULL”。为什么? 在我的应用程序页面中,我的图像上传表单是动态创建的。但是在我的页面开头(在用户点击动态创建图像上传表单的按钮之前),我正在使用这一行:

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

这是问题吗?是否存在这个隐藏输入的特定时间或地点?

在将上面一行包含在我的页面顶部之前,我还包含了一个包含一堆jQuery插件的长.js文件,但是从以下代码开始:

            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);

1 个答案:

答案 0 :(得分: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