Preview de Imagens Boa noite, comunidade. Utilizei o exemplo do ProductForm (http://www.adianti.com.br/framework_files/tutor/index.php?class=ProductForm&method=onEdit) para fazer o preview da imagem antes de salvar. Entretanto, a imagem não aparece para visualização. Alguém consegue identificar qual o problema? ...
RC
Preview de Imagens  
Boa noite, comunidade.
Utilizei o exemplo do ProductForm (www.adianti.com.br/framework_files/tutor/index.php?class=ProductForm) para fazer o preview da imagem antes de salvar.
Entretanto, a imagem não aparece para visualização.
Alguém consegue identificar qual o problema?

 
  1. <?php
  2. /**
  3. * SocioForm Form
  4. * @author <your name here>
  5. */
  6. class SocioForm extends TPage
  7. {
  8. protected $form; // form
  9. private $frame;
  10. /**
  11. * Form constructor
  12. * @param $param Request
  13. */
  14. public function __construct( $param )
  15. {
  16. parent::__construct();
  17. // creates the form
  18. $this->form = new TForm('form_Socio');
  19. $this->form->class = 'tform'; // change CSS class
  20. //$this->form = new BootstrapFormWrapper($this->form);
  21. $this->form->style = 'display: table;width:100%'; // change style
  22. $notebook1 = new BootstrapNotebookWrapper( new TNotebook(500, 460) );
  23. $this->form->add($notebook1);
  24. // create the form fields
  25. $id = new TEntry('id');
  26. $id->setEditable(FALSE);
  27. $id->setSize(100);
  28. $nome = new TEntry('nome');
  29. $nome->setSize('100%');
  30. $nome->addValidation('nome', new TRequiredValidator);
  31. $cpf = new TEntry('cpf');
  32. $cpf->addValidation('cpf', new TCPFValidator);
  33. $cpf->setMask('999.999.999-99');
  34. $cpf->setSize(200);
  35. $rg = new TEntry('rg');
  36. $rg->setSize(200);
  37. $data_nascimento = new TDate('data_nascimento');
  38. $data_nascimento->setMask('dd/mm/yyyy');
  39. $data_nascimento->setSize(178);
  40. $cadastrado = new TDate('cadastrado');
  41. $cadastrado->setEditable(FALSE);
  42. $cadastrado->setSize(200);
  43. $pai = new TEntry('pai');
  44. $pai->setSize('100%');
  45. $mae = new TEntry('mae');
  46. $mae->setSize('100%');
  47. $ativo = new TEntry('ativo');
  48. $ativo->setEditable(FALSE);
  49. $ativo->setSize(200);
  50. $sexo_id = new TDBRadioGroup('sexo_id', 'sistema', 'Sexo', 'id', 'descricao');
  51. $sexo_id->setLayout('horizontal');
  52. $estado_civil_id = new TDBCombo('estado_civil_id', 'sistema', 'EstadoCivil', 'id', 'descricao');
  53. $estado_civil_id->setSize(200);
  54. $cidade_nascimento_id = new ">TDBSeekButton('cidade_nascimento_id', 'sistema', 'form_Socio', 'Cidade', 'nome', 'cidade_nascimento_id', 'cidade_nascimento_nome');
  55. $cidade_nascimento_id->setSize(30);
  56. $cidade_nascimento_nome = new TEntry('cidade_nascimento_nome');
  57. $cidade_nascimento_nome->setEditable(FALSE);
  58. $cidade_nascimento_nome->setSize(146);
  59. $email = new TEntry('email');
  60. $email->addValidation('email', new TEmailValidator);
  61. $email->setSize('100%');
  62. $matricula = new TEntry('matricula');
  63. $matricula->addValidation('matricula', new TNumericValidator);
  64. $matricula->setSize(200);
  65. $ade = new TEntry('ade');
  66. $ade->setSize(200);
  67. $data_admissao = new TDate('data_admissao');
  68. $data_admissao->setMask('dd/mm/yyyy');
  69. $data_admissao->setSize(178);
  70. $cargo_funcao_id = new TDBCombo('cargo_funcao_id', 'sistema', 'CargoFuncao', 'id', 'descricao');
  71. $cargo_funcao_id->setSize(200);
  72. $departamento_id = new ">TDBSeekButton('departamento_id', 'sistema', 'form_Socio', 'Departamento', 'sigla', 'departamento_id', 'departamento_sigla');
  73. $departamento_id->setSize(30);
  74. $departamento_sigla = new TEntry('departamento_sigla');
  75. $departamento_sigla->setEditable(FALSE);
  76. $departamento_sigla->setSize(146);
  77. //prepara a tabela de dados pessoais
  78. $pessoais = new TTable;
  79. //$pessoais->border = '1';
  80. $row = $pessoais->addRow()->addCell(new TLabel(''))->width = 80;
  81. $row = $pessoais->addRow();
  82. $row->addCell(new TLabel('Id'));
  83. $row->addCell($id)->colspan = 3;
  84. $row = $pessoais->addRow();
  85. $row->addCell(new TLabel('Nome'));
  86. $row->addCell($nome)->colspan = 3;
  87. $row = $pessoais->addRow();
  88. $row->addCell(new TLabel('Mãe'));
  89. $row->addCell($mae)->colspan = 3;
  90. $row = $pessoais->addRow();
  91. $row->addCell(new TLabel('Pai'));
  92. $row->addCell($pai)->colspan = 3;
  93. $row = $pessoais->addRow();
  94. $row->addCell(new TLabel('E-mail'));
  95. $row->addCell($email)->colspan = 3;
  96. $pessoais->addRowSet( new TLabel(''));
  97. $row = $pessoais->addRow();
  98. $row->addCell(new TLabel(''));
  99. $row->addCell(new TLabel('CPF'))->width = 250;
  100. $row->addCell(new TLabel('Identidade'))->colspan = 2;
  101. $row = $pessoais->addRow();
  102. $row->addCell(new TLabel(''));
  103. $row->addCell($cpf);
  104. $row->addCell($rg)->colspan = 2;
  105. $row = $pessoais->addRow();
  106. $row->addCell(new TLabel(''));
  107. $row->addCell(new TLabel('Data de Nascimento'));
  108. $row->addCell(new TLabel('Cidade de Nascimento'))->colspan = 2;
  109. $row = $pessoais->addRow();
  110. $row->addCell(new TLabel(''));
  111. $row->addCell($data_nascimento);
  112. $row->addCell($cidade_nascimento_id);
  113. $row->addCell($cidade_nascimento_nome);
  114. $row = $pessoais->addRow();
  115. $row->addCell(new TLabel(''));
  116. $row->addCell(new TLabel('Estado Civil'));
  117. $row->addCell(new TLabel('Sexo'))->colspan = 2;
  118. $row = $pessoais->addRow();
  119. $row->addCell(new TLabel(''));
  120. $row->addCell($estado_civil_id);
  121. $row->addCell($sexo_id)->colspan = 2;
  122. $row = $pessoais->addRow();
  123. $row->addCell(new TLabel(''));
  124. $row->addCell(new TLabel('Situacao'));
  125. $row->addCell(new TLabel('Data de Cadastro'))->colspan = 2;
  126. $row = $pessoais->addRow();
  127. $row->addCell(new TLabel(''));
  128. $row->addCell($ativo);
  129. $row->addCell($cadastrado)->colspan = 2;
  130. //prepara a tabela de dados profissionais
  131. $profissional = new TTable;
  132. //$profissional->border = '1';
  133. $profissional->addRowSet( new TLabel(''));
  134. $row = $profissional->addRow();
  135. $row->addCell(new TLabel('Matrícula'))->colspan = 2;
  136. $row->addCell(new TLabel('Data de Admissão'));
  137. $row = $profissional->addRow();
  138. $row->addCell($matricula)->colspan = 2;
  139. $row->addCell($data_admissao);
  140. $row = $profissional->addRow();
  141. $row->addCell(new TLabel('ADE'))->colspan = 2;
  142. $row->addCell(new TLabel('Cargo/Função'));
  143. $row = $profissional->addRow();
  144. $row->addCell($ade)->colspan = 2;
  145. $row->addCell($cargo_funcao_id);
  146. $row = $profissional->addRow();
  147. $row->addCell(new TLabel('Lotação'))->colspan = 2;
  148. $row = $profissional->addRow();
  149. $row->addCell($departamento_id);
  150. $row->addCell($departamento_sigla)->width = 200;
  151. //prepara a tabela de endereco
  152. $endereco_id = new TEntry('endereco_id');
  153. $endereco = new TTable;
  154. //$endereco->border = '1';
  155. $endereco->addRowSet( new TLabel(''));
  156. $cep = new TEntry('cep');
  157. $cep->setMask('99.999-999');
  158. $cep->setSize(100);
  159. $busca_cep = new TAction( array($this, 'onBuscaCEP') );
  160. $cep->setExitAction($busca_cep);
  161. $estado_id = new TEntry('estado_id');
  162. $estado_id->setEditable(FALSE);
  163. $estado_id->setSize(200);
  164. $cidade_id = new TEntry('cidade_id');
  165. $cidade_id->setEditable(FALSE);
  166. $cidade_id->setSize(200);
  167. $bairro_id = new TEntry('bairro_id');
  168. $bairro_id->setEditable(FALSE);
  169. $bairro_id->setSize(200);
  170. $logradouro_id = new TEntry('logradouro_id');
  171. $logradouro_id->setSize(450);
  172. $numero = new TEntry('numero');
  173. $numero->setSize(200);
  174. $complemento = new TEntry('complemento');
  175. $complemento->setSize(200);
  176. $ponto_referencia = new TText('ponto_referencia');
  177. $ponto_referencia->setSize(450, 70);
  178. $row = $endereco->addRow();
  179. $row->addCell(new TLabel('CEP'))->colspan = 2;
  180. $row->addCell(new TLabel('Estado'));
  181. $row = $endereco->addRow();
  182. $row->addCell($cep)->colspan = 2;
  183. $row->addCell($estado_id);
  184. $row = $endereco->addRow();
  185. $row->addCell(new TLabel('Cidade'))->colspan = 2;
  186. $row->addCell(new TLabel('Bairro'));
  187. $row = $endereco->addRow();
  188. $row->addCell($cidade_id)->colspan = 2;
  189. $row->addCell($bairro_id);
  190. $row = $endereco->addRow();
  191. $row->addCell(new TLabel('Logradouro'))->colspan = 3;
  192. $row = $endereco->addRow();
  193. $row->addCell($logradouro_id)->colspan = 3;
  194. $row = $endereco->addRow();
  195. $row->addCell(new TLabel('Número'))->colspan = 2;
  196. $row->addCell(new TLabel('Complemento'));
  197. $row = $endereco->addRow();
  198. $row->addCell($numero)->colspan = 2;
  199. $row->addCell($complemento);
  200. $row = $endereco->addRow();
  201. $row->addCell(new TLabel('Ponto de Referência'))->colspan = 3;
  202. $row = $endereco->addRow();
  203. $cell = $row->addCell('');
  204. $cell->width = 500;
  205. $cell->colspan = 3;
  206. $cell->add($ponto_referencia);
  207. //montando o TMultiField de telefones
  208. $telefones = new TMultiField('telefones');
  209. $telefones->setHeight(160);
  210. $telefones->setOrientation('horizontal');
  211. $ddd = new TEntry('ddd');
  212. $ddd->setSize(70);
  213. $ddd->setMaxLength(2);
  214. $numero = new TEntry('numero');
  215. $numero->setSize(150);
  216. $telefones->addField('ddd', 'DDD', $ddd, 70);
  217. $telefones->addField('numero', 'Numero', $numero, 150, TRUE);
  218. //$operadora_id = new TDBCombo('operadora_id', 'sistema', 'Operadora', 'id', 'nome');
  219. //$operadora_id->setLayout('horizontal');
  220. $operadora = new TComboCombined('operadora_id', 'operadora_nome');
  221. $operadora->setSize(150);
  222. try
  223. {
  224. TTransaction::open('sistema');
  225. $items = Operadora::getObjects();
  226. $array = [];
  227. foreach ($items as $item)
  228. {
  229. $array[$item->id] = $item->nome;
  230. }
  231. $operadora->addItems( $array );
  232. $telefones->addField('operadora', 'Operadora', $operadora, 174);
  233. TTransaction::close();
  234. }
  235. catch (Exception $e)
  236. {
  237. new TMessage('error', $e->getMessage());
  238. }
  239. //prepara a tabela de foto
  240. $table_foto = new TTable;
  241. //$table_foto->border = '1';
  242. $table_foto->addRowSet( new TLabel(''));
  243. $foto = new TFile('foto');
  244. $foto->setSize(350);
  245. // complete upload action
  246. $foto->setCompleteAction(new TAction(array($this, 'onComplete')));
  247. $table_foto->addRowSet(new TLabel('Selecione a Foto do Sócio'));
  248. $table_foto->addRowSet($foto);
  249. $this->frame = new TElement('div');
  250. $this->frame->id = 'photo_frame';
  251. $this->frame->style = 'width:400px; height:auto; min-height:200px; border:1px solid gray; padding:4px;';
  252. $table_foto->addRowSet($this->frame);
  253. //montando o TMultiField de dependentes
  254. $dependentes = new TMultiField('dependentes');
  255. $dependentes->setHeight(200);
  256. //$dependentes->setOrientation('horizontal');
  257. $dependente_nome = new TEntry('dependente_nome');
  258. $dependente_nome->setSize(350);
  259. $dependente_cpf = new TEntry('dependente_cpf');
  260. $dependente_cpf->addValidation('dependente_cpf', new TCPFValidator);
  261. $dependente_cpf->setMask('999.999.999-99');
  262. $dependente_cpf->setSize(200);
  263. $dependente_rg = new TEntry('dependente_rg');
  264. $dependente_rg->setSize(200);
  265. $dependente_data_nascimento = new TDate('dependente_data_nascimento');
  266. $dependente_data_nascimento->setMask('dd/mm/yyyy');
  267. $dependente_data_nascimento->setSize(178);
  268. $dependentes->addField('dependente_nome', 'Nome', $dependente_nome, 300, TRUE);
  269. $dependentes->addField('dependente_data_nascimento', 'Data de Nascimento', $dependente_data_nascimento, 80, TRUE);
  270. $dependentes->addField('dependente_cpf', 'CPF', $dependente_cpf, 120);
  271. $dependentes->addField('dependente_rg', 'Identidade', $dependente_rg, 150);
  272. $parentesco = new TComboCombined('parentesco_id', 'parentesco_nome');
  273. $parentesco->setSize(120);
  274. try
  275. {
  276. TTransaction::open('sistema');
  277. $items = Parentesco::getObjects();
  278. $array = [];
  279. foreach ($items as $item)
  280. {
  281. $array[$item->id] = $item->descricao;
  282. }
  283. $parentesco->addItems( $array );
  284. $dependentes->addField('parentesco', 'Parentesco', $parentesco, 174);
  285. TTransaction::close();
  286. }
  287. catch (Exception $e)
  288. {
  289. new TMessage('error', $e->getMessage());
  290. }
  291. $notebook1->appendPage('Dados Pessoais', $pessoais);
  292. $notebook1->appendPage('Dados Profissionais', $profissional);
  293. $notebook1->appendPage('Endereço', $endereco);
  294. $notebook1->appendPage('Telefones', $telefones);
  295. $notebook1->appendPage('Foto', $table_foto);
  296. $notebook1->appendPage('Dependentes', $dependentes);
  297. // create the form actions
  298. /*
  299. $this->form->addQuickAction(_t('Save'), new TAction(array($this, 'onSave')), 'fa:floppy-o');
  300. $this->form->addQuickAction(_t('New'), new TAction(array($this, 'onClear')), 'bs:plus-sign green');
  301. */
  302. $button = TButton::create('save', array($this, 'onSave'), 'Save', 'fa:save');
  303. $this->form->setFields( array($id, $nome, $cpf, $rg, $data_nascimento, $cadastrado,
  304. $pai, $mae, $ativo, $sexo_id, $estado_civil_id, $cidade_nascimento_id,
  305. $cidade_nascimento_nome, $email, $matricula, $ade, $data_admissao, $foto,
  306. $departamento_id, $cargo_funcao_id, $endereco_id, $telefones,
  307. $cep, $estado_id, $cidade_id, $bairro_id, $logradouro_id, $numero,
  308. $complemento, $ponto_referencia) );
  309. $this->form->addField($button);
  310. $buttons_box = new TVBox;
  311. $buttons_box->add($button);
  312. // add a row for the form action
  313. $botoes = new TTable;
  314. $botoes->border = '1';
  315. $row = $botoes->addRow();
  316. $row->class = 'tformaction'; // CSS class
  317. $row->addCell($buttons_box)->colspan = 2;
  318. // vertical box container
  319. $container = new TVBox;
  320. $container->style = 'width: 90%';
  321. // $container->add(new TXMLBreadCrumb('menu.xml', __CLASS__));
  322. $container->add(TPanelGroup::pack('Cadastro de Sócio', $this->form));
  323. parent::add($container);
  324. parent::add($botoes);
  325. /*
  326. $botoes = new TTable;
  327. $botoes->width = '90%';
  328. //$botoes->border = '1';
  329. $row = $botoes->addRow();
  330. $cell = $row->addCell($button);
  331. $cell->class = 'formaction';
  332. parent::add($botoes);*/
  333. }
  334. /**
  335. * On complete upload
  336. */
  337. public static function onComplete($param)
  338. {
  339. new TMessage('info', 'Carregamento Completo: '.$param['foto']);
  340. // refresh photo_frame
  341. TScript::create("$('#photo_frame').html('')");
  342. TScript::create("$('#photo_frame').append(\\"<img style='width:100%' src='tmp/{$param['foto']}'>\\");");
  343. }
  344. /**
  345. * method onBuscaCEP($param)
  346. * Executado quando sair do campo $cep
  347. * Busca o endereco conforme o cep informado, para preencher os demais campos do endereco
  348. */
  349. public static function onBuscaCEP($param)
  350. {
  351. //$obj = new StdClass;
  352. $obj = $this->form->getData('Endereco');
  353. //$data = new PCepProgs($param['cep']);
  354. //$data = new PCepProgs('51350250');
  355. print_r($obj);die;
  356. $obj->logradouro = $data->getRua();
  357. $obj->cidade = $data->getCidade();
  358. $obj->bairro = $data->getBairro();;
  359. $obj->estado_id = $data->getUf();;
  360. //TForm::sendData('form_Clientes', $obj);
  361. $this->form->setData($obj);
  362. }
  363. /**
  364. * Save form data
  365. * @param $param Request
  366. */
  367. public function onSave( $param )
  368. {
  369. try
  370. {
  371. TTransaction::open('sistema'); // open a transaction
  372. /**
  373. // Enable Debug logger for SQL operations inside the transaction
  374. TTransaction::setLogger(new TLoggerSTD); // standard output
  375. TTransaction::setLogger(new TLoggerTXT('log.txt')); // file
  376. **/
  377. $this->form->validate(); // validate form data
  378. $object = new Socio; // create an empty object
  379. $data = $this->form->getData(); // get form data as array
  380. $object->fromArray( (array) $data); // load the object with data
  381. $object->store(); // save the object
  382. // get the generated id
  383. $data->id = $object->id;
  384. $this->form->setData($data); // fill form data
  385. TTransaction::close(); // close the transaction
  386. new TMessage('info', TAdiantiCoreTranslator::translate('Record saved'));
  387. }
  388. catch (Exception $e) // in case of exception
  389. {
  390. new TMessage('error', $e->getMessage()); // shows the exception error message
  391. $this->form->setData( $this->form->getData() ); // keep form data
  392. TTransaction::rollback(); // undo all pending operations
  393. }
  394. }
  395. /**
  396. * Clear form data
  397. * @param $param Request
  398. */
  399. public function onClear( $param )
  400. {
  401. $this->form->clear();
  402. }
  403. /**
  404. * Load object to form data
  405. * @param $param Request
  406. */
  407. public function onEdit( $param )
  408. {
  409. try
  410. {
  411. if (isset($param['key']))
  412. {
  413. $key = $param['key']; // get the parameter $key
  414. TTransaction::open('sistema'); // open a transaction
  415. $object = new Socio($key); // instantiates the Active Record
  416. $this->form->setData($object); // fill the form
  417. TTransaction::close(); // close the transaction
  418. $image = new TImage($object->foto);
  419. $image->style = 'width: 100%';
  420. $this->frame->add( $image );
  421. }
  422. else
  423. {
  424. $this->form->clear();
  425. }
  426. }
  427. catch (Exception $e) // in case of exception
  428. {
  429. new TMessage('error', $e->getMessage()); // shows the exception error message
  430. TTransaction::rollback(); // undo all pending operations
  431. }
  432. }
  433. }
  434. ?>

Curso Dominando o Adianti Framework

O material mais completo de treinamento do Framework.
Curso em vídeo aulas + Livro completo + Códigos fontes do projeto ERPHouse.
Conteúdo Atualizado!


Dominando o Adianti Framework Quero me inscrever agora!

Comentários (7)


LC

Apos o upload a imagem foi transferida para a pasta tmp ?
RC

O arquivo foi transferido com sucesso para a pasta tmp.
LC

Inspeciona o caminho da imagem para ver se ficou o src='tmp/2.jpg' , ou seja, se o caminho ficou certinho.
JC

Bom dia Ricardo Camara!

testei com a seguinte alteração e deu ok
 
  1. <?php
  2. $this->frame = new TElement('div');
  3. $this->frame->id = 'photo_frame';
  4. $this->frame->style = 'width:400px;height:auto;min-height:200px;border:1px solid gray;padding:4px;';
  5. $row = $this->form->addRow();
  6. $row->addCell('');
  7. $row->addCell($this->frame);
  8. ?>
GZ

Estou com esse mesmo problema....
LN

Boa Tarde!
Estou com problema bastante semelhante. Após selecionar a foto não exibe o preview.

O src está correto tmp/foto.jpg mas não exibe a imagem. No onEdit exibe normalmente, e se, durante o preview eu copio ela do /tmp para a raiz do projeto, e altero no src pelo inspecionar elemento exibe normalmente. Voltando o /tmp no src já não exibe (mesmo com ela lá no /tmp).
RC

Obrigado a todos pela participação, especialmente ao Jorge Cenci,
eu descobri o problema.
Tinha um arquivo .htaccess dentro da pasta tmp, depois que o exclui funcionou perfeitamente.