在 PHP 5.4 中使用带有代码标志的会话上传进度条

2022-08-31 01:16:05

参考本教程。使用 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中。当向控制器提交表单CI请求时,我的页面无论如何都会刷新。但在教程中,表单重定向到(相同的php文件)。我对此一无所知。请帮帮我。dashboard/addRoomPHP_SELF

控制器

 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
       }
    }

答案 1

如果你只想用jQuery来做,那么我已经使用了jQuery Form Submit插件,这将为您提供进度和更多。正如您在评论中所说的那样,您不需要任何插件,然后按照以下步骤进行操作,并按照教程建议的方式实现。

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

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

在这种情况下,即使您提交与否,您的表单仍然位于相同的控制器和方法上。

更新:根据更新的答案,请使用codeigniter默认库进行会话文件上传,如果出现JS错误,请使用控制台选项卡(Chrome)调试错误,或者如果您使用的是firefox,则使用firebug扩展来调试Javascript。


答案 2

如果您只想显示上传进度,则有很多插件可以这样做,我不知道为什么您在标题中特别提到了会话。

这是一个非常漂亮和简单的插件,可以轻松与任何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