Загрузить индикатор выполнения с использованием сеанса в PHP 5.4 с помощью codeigniter

Если вы хотите сделать это только с помощью jQuery, то я использовал jQuery Form Submit Plugin, который даст вам прогресс и многое другое. Как вы сказали в комментариях, вам не нужен плагин, а затем выполните следующие действия и реализуйте, как подсказка.

Предположим, у вас есть панель управления и метод 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(); ?> 

В этом случае ваша форма все еще находится на том же контроллере и методе, даже вы отправляете или нет.

Обновление: согласно обновленному ответу используйте библиотеки по умолчанию codeigniter для сеансов и загрузки файлов. В случае ошибки JS используйте вкладку консоли (Chrome) для отладки ошибки или если вы используете firefox, используйте расширение firebug для отладки Javascript.

Если вы просто хотите показать ход загрузки, доступно много плагинов, я не знаю, почему вы конкретно упомянули Session в названии.

Вот очень хороший и простой плагин, который с легкостью будет работать с любой фреймворк.

Образец кода

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

Вам не хватает (я не вижу его в вашем коде), что учебник в вашем вопросе объявляет и использует скрытый iframe в target атрибуте формы загрузки, это способ обработки загрузок, препятствующих обновлению страницы формы (URL-адрес действия будет загружен в iframe ).

google для скрытой загрузки iframe (и в конечном итоге для загрузки formdata, которая в наши дни должна быть лучшим способом обработки загрузок и показывать прогресс с несколькими javascript)

здесь старый пример, в котором используется скрытый iframe Ajax File Response Handling

Обновить

Вы должны изменить код в своем представлении на $arr = array("id"=>"myForm")

В настоящее время я вижу, что это array("id"=>"myform") (все строчные буквы)

getElementById чувствителен к регистру, и вы используете .getElementById("myForm").onsubmit

Когда вы используете какой-либо javascript, и что-то не работает, как ожидалось, браузер javascript браузера является первым местом для просмотра, вы должны увидеть ошибку, например (хром):

 Uncaught TypeError: Cannot set property 'onsubmit' of null 

Это связано с тем, что getElementById не находит элемент с id myForm и возвращает null , в html / DOM он действительно называется myform .

Обновить

Итак, я получил то, что работал, вместо welcome контроллера я создал новый контроллер Upload (в верхнем регистре, потому что я использую CI 3 dev , его легко адаптировать к старым версиям) под рабочими файлами.

URL будет 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> 

уведомление

Я использую raw include_once для удобства, потому что php base_url используется внутри javascript, возможно, лучше иметь небольшой встроенный javascript в html представления, который объявляет переменную javascript с base_url значения base_url затем включает статический javascript из каталога ресурсов как обычно.

учебник, который я видел, на самом деле вам нужно написать AJAX на ваш взгляд, и вызвать контроллер через ajax, не через форму отправки с помощью кнопки. так что ваша страница не будет обновлена. внимательно ознакомьтесь с учебным пособием, предоставленным вами ссылкой, и когда вы прокрутите вниз, вы увидите javascript, где он отправляет HTTP-запросы через AJAX, например

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

это 1 функция, где он создает XMLHttpRequests для получения ответа от файла, где вы должны получить ответ через XMLHttpRequest с вашего контроллера.

С уважением