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中。向控制器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>

enter image description here

Answer 3

您错过了（我的代码中没有看到）您的问题中的教程声明并在target属性中使用了隐藏的iframe 上传表单，这是一种处理上传的方法，阻止表单页面刷新（ action url将被加载到 IFRAME ）。

google for 隐藏的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中它实际上被命名为{{1 }}

<强>更新

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

网址为Upload。

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>，因为在javascript中使用了php include_once，在视图的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获取响应。

此致

使用PHP54中的会话使用codeigniter上传进度条

在我的CI视图中

脚本

控制器

4 个答案: