send 2 request with 1 ajax - php

Question

I have little problem.
this is my html
<div class="row" style="margin-bottom: 10px;">
<div class="col-xs-1">
<span class="upload-excell btn btn-success" id="uploadExcellBtn"><i class="fa fa-upload"></i> Import Excel</span>
<div class="progress hidden" id="progress">
<div id="progressbat" class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 0;">
0%
</div>
</div>
</div>
<div class="col-xs-4">
<input class="form-control filter" type="search" title="filter" placeholder="Search...">
</div>
<div class="col-xs-7"></div>
</div>
<form class="Upload-form hiddenfile" method="post" enctype="multipart/form-data" action='upload url'>
<input type="hidden" name="csrf_token" value="<?php echo $this->session->csrf_token; ?>" />
<input type="file" name="file" class="excel-file"/>
</form>
this is my ajax
var $PROGRESS_BAR = document.getElementById('progressbat'),
progres = document.getElementById('progress');
$(document).on('submit', '.Upload-form', function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded / evt.total * 100);
$PROGRESS_BAR.style.width = percentComplete + '%';
$PROGRESS_BAR.innerHTML = percentComplete + '%';
}
}, false);
return xhr;
},
type:'POST',
url: $(this).attr('action'),
data:formData,
cache:false,
contentType: false,
processData: false,
beforeSend: function(){
uploadExcellBtn.className = "upload-excell btn btn-success hidden";
progres.className = "progress";
$PROGRESS_BAR.style.width = '0%';
$PROGRESS_BAR.innerHTML = '0%';
},
success:function(){
$PROGRESS_BAR.style.width = '0%';
$PROGRESS_BAR.innerHTML = '0%';
$PROGRESS_BAR.className = "progress-bar progress-bar-success";
},
complete: function () {
var xhr2 = new XMLHttpRequest();
xhr2.open("GET", "new url", true);
xhr2.onerror = function() { console.log('[XHR] Fatal Error.'); };
xhr2.onreadystatechange = function() {
if (xhr2.readyState > 2){
var responseInfo = xhr2.responseText.replace(/}/g, '}/').split("/").clean(undefined);
for(var $i = 0; $i < responseInfo.length; $i++){
var parsedinfo = JSON.parse(responseInfo[$i]),
load = parseInt(parsedinfo.loaded);
if(load > loaded){
loaded = load;
percentage = Math.round(load / parseInt(parsedinfo.total) * 100);
$PROGRESS_BAR.style.width = percentage + '%';
$PROGRESS_BAR.innerHTML = percentage + '%';
}
}
}
if (xhr2.readyState == 4){
percentage = 0;
$PROGRESS_BAR.style.width = '0%';
$PROGRESS_BAR.innerHTML = '0%';
$PROGRESS_BAR.className = "progress-bar progress-bar-danger";
progres.className = "progress hidden";
uploadExcellBtn.className = "upload-excell btn btn-success";
refresh();
}
};
xhr2.send();
},
error: function(data){
console.log("error");
console.log(data);
}
});
return false;
});
I think it is possible to clean this code... as you understand in the first I have file upload and after complete I need to send request for reading this file it is reading on server side very well but I can not response my progress bar after upload complete.
this is my php function for uploading file
$excell = $_FILES["file"]["name"];
$uploadedfile = $_FILES['file']['tmp_name'];
if ($excell) {
$filename = stripslashes($_FILES['file']['name']);
$extension = $this->getExtension($filename);
$extension = strtolower($extension);
if ($extension == ("xlsx" || "xls")) {
$newname = $this->Conf->root_dir."/uploads/".Generate::string(5).".$extension";
$this->Session->new_file = $newname;
move_uploaded_file($uploadedfile, $newname);
echo true;
} else {
echo ' It is not Excell ';
}
} else {
echo ' error on upload ';
}
and this code is for reading
set_time_limit(0);
ob_implicit_flush(true);
ob_end_flush();
$xlsx = #(new SimpleXLSX($this->Session->new_file));
$data = $xlsx->rows();
$totalitems = count($data);
$lastkey = $totalitems - 1;
$current = 0;
foreach ($data as $key => $val) {
$current++;
if ($key == 0 || $key == $lastkey) continue;
// here I`m inserting in tho database
sleep(1);
$response = array(
'loaded' => $current,
'total' => $totalitems
);
echo json_encode($response);
}
sleep(1);
unlink($this->Session->new_file);
unset($this->Session->new_file);
$response = array(
'loaded' => $totalitems,
'total' => $totalitems
);
echo json_encode($response);
response for upload is working very well
but reading response not working...

Answer 1

I resolved this problem with jquery ajax..
with xhr parameter...