I'm looking for images from the SQL-server database through PHP and jQuery + AJAX. The image when it is small loads everything completinho, but when the image is a little big of this error in JavaScript:
Image corrupted or truncated: data: image / jpg; base64, / 9j / 4TSPRXhpZgAASUkqAAgAAAARAA4BAgAgAAAA2gAAAA8BAgAFAAAA + gAAABAB ...
And the image is as below, I already did a test opening the file directly a PHP page without the use of jQuery + AJAX and gives the same problem, so I believe the problem is in PHP or SQL-server.
mssql_connect('192.168.1.xxx','sa','senhaDoBanco');mssql_select_db('database');$query="exec sp_funcionarioDetalhes";
$result = mssql_query($query);
$obj = mssql_fetch_object($result);
header("Content-type: image/jpeg");
echo $array[1]->fun_foto;
I'll be more technical, so maybe someone gives more importance to the problem. I'll pass all the codes. file officialDetails.html
<?php
/*
* Maison K. Sakamoto 03/11/2014 - Funcionário Detalhes
*/
session_start('login');
if(!@$_SESSION["conectado"]=='sim'){
echo "<script language='JavaScript'>
alert('Voce nao esta conectado, Favor logar novamente.');
window.location = '../index.php';
</script>";
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sistemas BTR - Transportes</title>
<link rel="stylesheet" type="text/css" media="screen" href="../css/grid/style.css" />
<style type="text/css">
#ui-datepicker-div { line-height: 1; }
#fun_ctps { font-size: 8pt; }
.container_12 { width: 76%; padding-top: 30px; }
.container_12 .grid_8 { width: 626px; margin-top: 10px; }
.container_12 .grid_4 { width: 302px; margin-top: 10px; }
.container_12 .grid_2 { margin-top: 10px; }
.container_12 .grid_2.foto{ margin-top: -161px; }
.grid_11 fieldset { border: 1px dotted #666; }
.right { float: right; }
.text-right { text-align: right; }
.ui-widget-content { border: 1px solid #aaaaaa; }
.ui-button { -moz-user-select: none; } /* PARA QUE O TEXTO DO BOTAO NAO SEJA SELECIONADO COM O MOUSE*/
.field-pequeno { width: 112px; }
.field-principal { min-height: 300px; }
.foto{ height: 207px; }
#fun_foto img { max-width: 140px; max-height: 202px; }
.listaFuncionario { min-height: 250px; }
.grid_4.input { width: 300px; }
.coluna1 input {
border: medium none;
font-family: Verdana;
font-size: 12px;
height: 20px;
text-align: center;
width: 140px;
}
.coluna1 textarea {
border: medium none;
font-family: Verdana;
font-size: 11px;
height: 77px;
line-height: 14px;
overflow: hidden;
resize: none;
width: 300px;
}
</style>
</head>
<div class="container_12">
<fieldset class="field-principal ui-widget ui-widget-content ui-corner-all">
<legend class="ui-widget ui-widget-header ui-corner-all">Funcionário - Detalhes</legend>
<div class="grid_4 omega">
<fieldset class="ui-widget ui-widget-content ui-corner-all listaFuncionario">
<legend>NOME</legend>
<div id="div_fun" class="grid_3 alpha"></div>
</fieldset>
</div>
<div class="grid_11 omega">
<fieldset class="grid_2 alpha coluna1"> <legend>FILIAL</legend> <input id="fun_filial" type="text" readonly=""/> </fieldset>
<fieldset class="grid_2 alpha coluna1"> <legend>NASCIMENTO</legend> <input id="fun_dt_nascimento" type="text" readonly=""/> </fieldset>
<fieldset class="grid_2 alpha coluna1"> <legend>ADMISSÃO</legend> <input id="fun_dt_admissao" type="text" readonly=""/> </fieldset>
<fieldset class="grid_2 alpha coluna1"> <legend>DEMISSÃO</legend> <input id="fun_dt_demissao" type="text" readonly=""/> </fieldset>
<fieldset class="grid_2 alpha coluna1"> <legend>FÉRIAS</legend> <input id="fun_dt_ferias" type="text" readonly=""/> </fieldset>
<fieldset class="grid_2 alpha coluna1"> <legend>CPF</legend> <input id="fun_cpf" type="text" /> </fieldset>
<fieldset class="grid_2 alpha coluna1"> <legend>PIS</legend> <input id="fun_pis" type="text" readonly=""/> </fieldset>
<fieldset class="grid_2 alpha coluna1"> <legend>CTPS</legend> <input id="fun_ctps" type="text" readonly=""/> </fieldset>
<fieldset class="grid_2 alpha coluna1"> <legend>SALÁRIO</legend> <input id="fun_salario" type="text" readonly=""/> </fieldset>
<fieldset class="grid_4 alpha coluna1"> <legend>ENDEREÇO</legend> <textarea id="fun_endereco" readonly=""/> </fieldset>
<fieldset class="grid_2 alpha coluna1"> <legend>CEP</legend> <input id="fun_cep" type="text" readonly=""/> </fieldset>
<fieldset class="grid_2 alpha coluna1"> <legend>CIDADE</legend> <input id="fun_cidade" type="text" readonly=""> </fieldset>
<fieldset class="grid_4 alpha coluna1"> <legend>CARGO</legend> <input id="fun_cargo" type="text" readonly=""> </fieldset>
<fieldset class="grid_8 alpha coluna1"> <legend>AÇÕES</legend>
<button id="btGravar" >Gravar Alteração</button>
<button id="btListaFerias">Imprimir Lista de Férias</button>
<button id="btDadosFun">Imprimir Dados do Funcionário</button>
</fieldset>
<fieldset class="grid_2 alpha coluna1 foto"> <legend>FOTO</legend> <div id="fun_foto"></div> </fieldset>
</div>
</fieldset>
</div>
<link rel="stylesheet" href="../js/jqwidgets-ver3.4.0/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../js/jqwidgets-ver3.4.0/jqwidgets/jqxcore.js"> </script>
<script type="text/javascript" src="../js/jqwidgets-ver3.4.0/jqwidgets/jqxmenu.js"> </script>
<script type="text/javascript" src="../js/jqwidgets-ver3.4.0/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../js/jqwidgets-ver3.4.0/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../js/jqwidgets-ver3.4.0/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../js/jqwidgets-ver3.4.0/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../js/jqwidgets-ver3.4.0/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../js/jqwidgets-ver3.4.0/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../js/jqwidgets-ver3.4.0/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../js/jqwidgets-ver3.4.0/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../js/jqwidgets-ver3.4.0/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript">
loadjscssfile('../js/rh/funcionarioDetalhes.js','js');
</script>
</html>
Official file Details.js
/*
* MAISON K. SAKAMOTO - 03/11/2014 - CRIAÇÃO DO ARQUIVO
*/
var fun= {};
fun.start=function(){
$('button').button();
$('#btGravar').click(function(){ });
$('#btListaFerias').click(function(){ });
$('#btDadosFun').click(function(){ });
fun.buscarFuncionarios();
};
fun.buscarFuncionarios=function(){
var array = custom.ajax(new Object(),'buscarFuncionarios','../view/rh/vFuncionarioDetalhes.php');
fun.setListaFuncionarios(array);
};
fun.setListaFuncionarios=function(json){
$("#div_fun").jqxListBox({
source: json, width: 280, height: 500, selectedIndex: 0,
displayMember: 'fun_nome', valueMember: 'fun_id'
});
$("#div_fun").bind('select', function(event){
if (event.args){
var obj = event.args.item.originalItem;
fun.preencheForm(obj);
}
});
var t = $("#div_fun").jqxListBox('getSelectedItem');
fun.preencheForm(t.originalItem);
};
fun.preencheForm = function(obj){
$("#fun_filial").val( obj.unidade );
$("#fun_dt_nascimento").val( obj.fun_dt_nascimento );
$("#fun_dt_admissao").val( obj.fun_dt_admissao );
$("#fun_dt_demissao").val( obj.fun_dt_demissao );
$("#fun_dt_ferias").val( obj.fun_dt_ferias );
$("#fun_cargo").val( obj.fun_cargo );
$("#fun_cpf").val( obj.fun_cpf );
$("#fun_pis").val( obj.fun_pis );
$("#fun_ctps").val( obj.fun_ctps_numero + "" +obj.fun_ctps_serie+ " " +obj.fun_ctps_uf);
$("#fun_salario").val( obj.fun_salario );
$("#fun_endereco").val( obj.fun_endereco +' \r\nNº '+obj.fun_n_endereco+' \r\n'+obj.fun_bairro );
$("#fun_cep").val( obj.fun_cep );
$("#fun_cidade").val( obj.fun_cidade );
//$("#fun_foto").empty().append( $('<img>').attr('src',"data:image/png;base64," + obj.fun_foto) );
var img = $('<img>').attr('src',"data:image/jpg;base64," + obj.fun_foto);
$("#fun_foto").empty().append( img );
};
fun.start();
File vFuncionario.php (viewer)
include_once '../../controller/OpenDB.php';
include_once '../../controller/ColFuncionario.php';
@session_start('login');
$colFuncionario = new ColFuncionario();
$c = new OpenDB(); // CLASSE DO BANCO DE DADOS
$funcao = $_REQUEST['funcao'];
call_user_func($funcao);
function buscarFuncionarios(){
global $colFuncionario;
global $c;
$c->conCordilheira();
$array = $colFuncionario->buscarFuncionarios();
echo json_encode( $array );
}
File ColFuncionario.php (controller)
<?php
/*
* Autor: Maison K. Sakamoto
* Revisao: 0
* Data: 25/07/2012
*
* Descricao:
* Controle de Funcionario
*/
class ColFuncionario{
public function __construct(){
}
public function inserirFuncionario($obj){
//STRTOUPPER RESOLVIDO PROBLEMA DE ACENTUAÇÃO EM MAIUSCULAS
$query = "insert into tab_funcionario(cargo_id,func_nome,func_hab,func_hab_venc,func_cpf) values
($obj->cargo_id,'".strtoupper(strtr($obj->func_nome,"áéíóúâêôãõàèìòùç","ÁÉÍÓÚÂÊÔÃÕÀÈÌÒÙÇ")).
"','$obj->func_hab',STR_TO_DATE('$obj->func_hab_venc','%d/%m/%Y'),'$obj->func_cpf')";
mysql_query($query);
return "mysql_info: ".mysql_info()."<br/>"."mysql_error: ".mysql_error()."<br/>query: ".$query;
}
public function getCargos(){
$query = "select * from tab_cargo";
$result = mysql_query($query);
while($obj = mysql_fetch_object($result)){
$array[] = $obj;
}
return $array;
}
public function getMotoristas(){
$query = "select * from tab_funcionario where cargo_id = 1 and func_inativo is null ORDER BY func_nome";
$result = mysql_query($query);
while($obj = mysql_fetch_object($result)){
$array[] = $obj;
}
return $array;
}
// BUSCA FUNCIONARIOS DO SQL-SERVER BANCO DE DADOS CORDILHEIRA
public function buscarFuncionarios(){
//ini_set('mssql.charset', 'UTF-8');
$query = "exec sp_funcionarioDetalhes";
$result = mssql_query($query);
while($obj = mssql_fetch_object($result)){
$obj->fun_nome = mb_convert_encoding($obj->fun_nome, 'UTF-8');
$obj->fun_cidade = mb_convert_encoding($obj->fun_cidade, 'UTF-8');
$obj->unidade = mb_convert_encoding($obj->unidade, 'UTF-8');
$obj->fun_endereco = mb_convert_encoding($obj->fun_endereco, 'UTF-8');
$obj->fun_bairro = mb_convert_encoding($obj->fun_bairro, 'UTF-8');
$obj->fun_cargo = mb_convert_encoding($obj->fun_cargo, 'UTF-8');
$obj->fun_foto = base64_encode( $obj->fun_foto);
$array[] = $obj;
}
return $array;
}
}
OpenDB.php file
class OpenDB{
public function conCordilheira(){
//1 passo - Conecta ao servidor SQL 2008 R2 Cordilheira
$conn = mssql_connect('192.168.1.xxx', 'sa', 'senhaDoBanco');
mssql_select_db('databaseDoMeuSqlServer');
//$conn = sqlsrv_connect( $serverName, $connectionInfo);
if( $conn ) {
return $conn;
//echo "Connection established.<br />";
}else{
echo "Connection could not be established.<br />";
die( print_r(mssql_erro(), true));
}
}
}
result