使用 PHP 5.4 中的 session 和 codeigniter 上传进度条

Question

参考本教程。 Tracking upload progress with php 。我想让它在 Codeigniter 中工作。我没有开始让它在 CI 中工作。我想上传文件并跟踪进度。

在我的 CI 视图中

 <?php $arr = array("id"=>"myform");
       echo form_open_multipart("welcome/uploads",$arr); ?>
      <input type="hidden" value="myForm" name="<?php echo ini_get("session.upload_progress.name"); ?>">
      <table>
      <tr>
          <td>file</td>
         <td><input type="file" name="images[]" multiple></td>
     </tr>
     <tr>
         <td>name</td>
         <td><input type="text" name="naam"></td>
    </tr>
    <tr>
        <td></td>
        <td><input type="submit"></td>
    </tr>
</table>
<?php echo form_close(); ?>
<div id="bar_blank">

脚本

function toggleBarVisibility() {
  var e = document.getElementById("bar_blank");
  e.style.display = (e.style.display == "block") ? "none" : "block";
}

function createRequestObject() {
   var http;
   if (navigator.appName == "Microsoft Internet Explorer") {
       http = new ActiveXObject("Microsoft.XMLHTTP");
   }
   else {
      http = new XMLHttpRequest();
  }
     return http;
}

 function sendRequest() {
   var http = createRequestObject();
   http.open("GET", "<?php echo base_url().'index.php/welcome/progress' ?>");
   http.onreadystatechange = function () { handleResponse(http); };
   http.send(null);
 }

function handleResponse(http) {
   var response;
   if (http.readyState == 4) {
    response = http.responseText;
    document.getElementById("bar_color").style.width = response + "%";
    document.getElementById("status").innerHTML = response + "%";

    if (response < 100) {
        setTimeout("sendRequest()", 1000);
    }
    else {
        toggleBarVisibility();
        document.getElementById("status").innerHTML = "Done.";
      }
   }
}

 function startUpload() {
     toggleBarVisibility();
    setTimeout("sendRequest()", 1000);
 }

 (function () {
      document.getElementById("myForm").onsubmit = startUpload;  //error is here
})();

根据上面的教程，它在核心 php.ini 中。当向控制器dashboard/addRoom 提交表单 CI 请求时，我的页面无论如何都会刷新。但在教程中，Form 重定向到 PHP_SELF（相同的 php 文件）。我对此一无所知。请帮帮我。

控制器

 function progress()
    {
        session_start();

        $key = ini_get("session.upload_progress.prefix") . "myForm";
        if (!empty($_SESSION[$key])) {
            $current = $_SESSION[$key]["bytes_processed"];
            $total = $_SESSION[$key]["content_length"];
            echo $current < $total ? ceil($current / $total * 100) : 100;
        }
        else {
            echo 100;
        }
    }
    public function uploads()
    {
        if(!empty($_FILES['images']['name'][0]))
       {
        //uploadinf file code
       }
    }

Answer 1

如果你只想用 jQuery 来做，那么我使用了 jQuery Form Submit 插件，它会给你带来进步等等。正如您在comments 中所说，您不需要任何插件，然后按照这些步骤并按照教程建议的方式实施。

假设您有控制器仪表板，并且方法 addRoom 正在显示您的 html 表单：

class Dashboard extends CI_Controller {


    function addRoom() {

        // Detect URI: http://example.com/dashboard/addRoom/upload_file
        $upload_req = $this->uri->segment("3");

        if( $upload_req == "upload_file" ) {
            // Do the file upload Actions
        }

        // Generate Form
        $this->load->view("Generate_view");
    }

}

查看：

<?php 
    $ar = array("class"=>"form-horizontal");
    echo form_open_multipart('dashboard/addRoom/upload_file',$ar);
 ?>
 <input type="text" name="fileName">
 <input type="file" name="upload">
 <input type="submit" value="add">
 <?php echo form_close(); ?>

在这种情况下，无论您是否提交，您的表单仍然在同一个控制器和方法上。

更新：根据更新的答案，请使用Session和File Uploads的codeigniter默认库，如果出现JS错误，请使用控制台选项卡（Chrome）调试错误，或者如果您正在使用 firefox 然后使用 firebug 扩展来调试 Javascript。

Answer 2

如果你只是想显示上传进度，有很多插件可以做到这一点，我不知道你为什么在标题中特别提到了 Session。

Here 是一个非常漂亮和简单的插件，可以轻松地与任何 PHP 框架一起使用。

代码示例

<script>
/*jslint unparam: true */
/*global window, $ */
$(function () {
    'use strict';
    // Change this to the location of your server-side upload handler:
    var url = window.location.hostname === 'blueimp.github.io' ?
                '//jquery-file-upload.appspot.com/' : 'server/php/';
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo('#files');
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
        }
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>

Answer 3

您缺少（我在您的代码中没有看到）您问题中的教程声明并在上传表单的 target 属性中使用 hidden iframe，这个是一种处理上传的方法，防止 form 页面 refresh（action url 将被加载到 iframe )。

google 用于隐藏 iframe 上传（最终用于 formdata 上传，现在应该是一种更好的方式来处理上传并使用少量 javascript 显示进度）

这里是一个使用隐藏 iframe Ajax File Upload Response Handling 的旧示例

更新

您应该将视图中的代码更改为$arr = array("id"=>"myForm")

目前我看到的是array("id"=>"myform")（全小写）

getElementById 区分大小写，您使用 .getElementById("myForm").onsubmit

当您使用一些 javascript 并且某些东西没有按预期工作时，浏览器的 javascript 控制台 是第一个查看的地方，您应该会看到类似 (chrome) 的错误：

Uncaught TypeError: Cannot set property 'onsubmit' of null

这是因为getElementById 找不到带有id myForm 的元素并返回null，在html/DOM 中它确实被命名为myform。

更新

所以，我得到了工作，而不是 welcome 控制器，我创建了一个新的 Upload 控制器（大写，因为我使用的是 CI 3 dev，应该很容易适应它到旧版本），在工作文件下方。

网址将是http://your-host/optional-dir/index.php/upload。

application/controllers/Upload.php:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Upload extends CI_Controller {
    public function index() {
        $this->load->helper(array('form', 'url'));
        $this->load->view('upload');
    }
    function progress() {
        session_start();
        $key = ini_get("session.upload_progress.prefix") . "myForm";
        if (!empty($_SESSION[$key])) {
            $current = $_SESSION[$key]["bytes_processed"];
            $total = $_SESSION[$key]["content_length"];
            echo $current < $total ? ceil($current / $total * 100) : 100;
        }  else {
            echo 100;
        }
    }
    public function uploads() {
        if(!empty($_FILES['images']['name'][0]))  {
            //uploadinf file code
        }
    }
}

application/views/upload.php:

<!DOCTYPE html>
<html>
    <head>
        <title>upload</title>
        <style>
            #bar_blank {
                border: solid 1px #000;
                height: 20px;
                width: 300px;
            }

            #bar_color {
                background-color: #006666;
                height: 20px;
                width: 0px;
            }

            #bar_blank, #hidden_iframe {
                display: none;
            }
        </style>
    </head>
    <body>
        <?php $arr = array("id"=>"myForm", "target"=>"hidden_iframe");
        echo form_open_multipart("upload/uploads",$arr); ?>
        <input type="hidden" value="myForm" name="<?php echo ini_get("session.upload_progress.name"); ?>">
        <table>
            <tr>
                <td>file</td>
                <td><input type="file" name="images[]" multiple></td>
            </tr>
            <tr>
                <td>name</td>
                <td><input type="text" name="naam"></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit"></td>
            </tr>
        </table>
        <?php echo form_close(); ?>
        <iframe id="hidden_iframe" name="hidden_iframe" src="about:blank"></iframe>
        <div id="status"></div>
        <div id="bar_blank">
            <div id="bar_color"></div>
        </div>
        <?php include_once(dirname(__FILE__).DIRECTORY_SEPARATOR.'upload.js.php'); ?>
    </body>
</html>

./application/views/upload.js.php:

<script>
function toggleBarVisibility() {
    console.log('toggleBarVisibility');
    var e = document.getElementById("bar_blank");
    e.style.display = (e.style.display == "block") ? "none" : "block";
}

function createRequestObject() {
    console.log('createRequestObject');
    var http;
    if (navigator.appName == "Microsoft Internet Explorer") {
        http = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        http = new XMLHttpRequest();
    }
    return http;
}

function sendRequest() {
    console.log('sendRequest');
    var http = createRequestObject();
    http.open("GET", "<?php echo base_url().'index.php/upload/progress' ?>");
    http.onreadystatechange = function () { handleResponse(http); };
    http.send(null);
}

function handleResponse(http) {
    console.log('handleResponse');
    var response;
    if (http.readyState == 4) {
        response = http.responseText;
        document.getElementById("bar_color").style.width = response + "%";
        document.getElementById("status").innerHTML = response + "%";

        if (response < 100) {
            setTimeout("sendRequest()", 1000);
        } else {
            toggleBarVisibility();
            document.getElementById("status").innerHTML = "Done.";
        }
    }
}

function startUpload() {
    console.log('startUpload');
    toggleBarVisibility();
    setTimeout("sendRequest()", 1000);
}

(function () {
    console.log('init');
    document.getElementById("myForm").onsubmit = startUpload;  //error is here
})();

</script>

通知

为了方便起见，我使用原始的include_once，因为 php base_url 在 javascript 中使用，可能会更好地在视图的 html 中使用一个小的内联 javascript，它声明一个带有 base_url 值的 javascript 变量然后像往常一样包含资产目录中的静态 javascript。

Answer 4

我看到的教程实际上你必须在你的视图中编写 AJAX，并通过 ajax 而不是通过带有按钮的表单提交来调用控制器。所以你的页面不会被刷新。仔细查看您提供的链接的教程，当您向下滚动时，您会看到 javascript 通过 AJAX 发送 HTTP 请求，例如

 function createRequestObject() {
  var http;
  if (navigator.appName == "Microsoft Internet Explorer") {
     http = new ActiveXObject("Microsoft.XMLHTTP");
   }
   else {
    http = new XMLHttpRequest();
  }
   return http;
}

这是一个 1 函数，它创建 XMLHttpRequests 以从文件中获取响应，您必须通过控制器的 XMLHttpRequest 获取响应。

问候