O controle Image já se encontra em nossa página, permitindo que vejamos a imagem, mas vamos dar ao usuário da Web a possibilidade de alterar a imagem associada ao produto.

Para isso, vamos permitir que o usuário da Web faça upload de um arquivo de imagem encontrado em seu computador e associe-o ao item encontrado no arquivo de dados. Estaremos usando um controle de upload.


	Observação	O upload consiste em copiar um arquivo do computador cliente para o servidor. Pelo contrário, o download consiste em copiar um arquivo do servidor para o computador cliente.


	Observação	WEBDEV se propõe a gerenciar o upload do arquivo por meio de dois controles específicos: um controle de upload usado para fazer upload de um único arquivo, um controle de upload usado para fazer upload de vários arquivos. Neste exemplo, o usuário fará o upload de um único arquivo por vez, portanto, usaremos o controle de upload de arquivo único.

Para criar o controle de upload:
1. No painel "Criação", no grupo "Controles usuais", clique em "Botão". A lista de botões predefinidos é exibida.
2. Selecione "Carregando arquivos".
3. Clique na posição onde o controle deve ser criado na página (abaixo do controle Image, por exemplo).


	Observação	O controle de upload inclui: uma célula contendo: um controle estático, um controle Looper usado para exibir as características dos arquivos a serem carregados. um botão que permite ao usuário selecionar o arquivo para upload, um botão que permite ao usuário enviar os arquivos para o servidor.

Agora vamos adaptar o código de controle para gerenciar o upload de arquivos em nosso site.

Para configurar o controle de upload:

Exibe o código do controle do botão "ADICIONAR": selecione o controle e pressione F2.
Diferentes eventos WLanguage estão associados ao controle Upload. Vamos modificar o evento "Recebendo os arquivos carregados" para copiar a imagem para o diretório de dados do site.
Escreva o seguinte código no evento "Recebendo os arquivos enviados" (ignore os erros de compilação, iremos corrigi-los mais tarde):
UploadCopyFile (MySelf, fDataDir (), UploadFileName (MySelf, False ))
gsImagePath = fDataDir () + [ fSep ()] + UploadFileName (MySelf, False )
IMG_ Visual = gsImagePath

Vamos estudar este código:

UploadCopyFile é usado para salvar no servidor o arquivo carregado pelo usuário. No nosso caso, o arquivo é copiado para o diretório de dados (retornado por fDataDir ). O nome do arquivo é mantido.

Em seguida, o caminho da imagem enviada é armazenado em uma variável global chamada gsImagePath .


	Observação	Por que usar uma variável global? Uma variável global é necessária aqui porque o caminho da imagem será usado no código do botão "Validar", para salvar a nova imagem no arquivo de dados. Consulte os apêndices para obter mais detalhes sobre as condições de uso de variáveis locais e globais.

O fSep permite recuperar o separador que será usado no sistema operacional do servidor ("\" para Windows, "/" para Linux). Portanto, seu site é independente do servidor onde está instalado!
Em seguida, a imagem carregada é exibida no controle IMG_Visual Image.

Ao digitar e salvar o código, a variável gsImagePath é exibida em vermelho e um erro de compilação ocorre no painel de erro: "'gsImagePath' identificador desconhecido ou inacessível". Na verdade, essa variável global não foi declarada.
Para declarar a variável global:
- Vá para o evento "Declarações globais" da página (por exemplo, no editor de código, vá para o painel "Código" e selecione "Declarações globais" na caixa de combinação que lista todos os eventos).
- Digite o seguinte código após a declaração do procedimento:
  gsImagePath é string
Salve as modificações clicando entre os botões de acesso rápido. Os erros de compilação desaparecem.
Feche o editor de código.

Nossa imagem agora pode ser carregada no servidor. Tudo que você precisa fazer agora é salvar a imagem no banco de dados.

Para salvar a imagem no arquivo de dados do produto:
1. Exiba o código do controle do botão "Validar":
  - Selecione o controle do botão "Validar".
  - Pressione F2.
2. No evento "Click (server)", adicione o seguinte código APÓS a chamada para PageToFile :
  IF gsImagePath <> "" ENTÃO Produto . Visual = fLoadBuffer ( gsImagePath ) END
3. Vamos dar uma olhada neste código WLanguage:
  - Este código verifica o conteúdo da variável global gsImagePath . Se esta variável não corresponder a uma string vazia, significa que a imagem foi enviada pelo usuário. Neste caso, o item "Visual" do arquivo de dados do Produto é preenchido com o conteúdo da imagem binária. Este conteúdo é recuperado por fLoadBuffer .
  - HModify (já encontrado no código) é usado para salvar as alterações no arquivo de dados.
4. Salve as modificações ( ou Ctrl + S).
5. Feche a janela de código.

Páginas

quinta-feira, 17 de setembro de 2020

DICAS 3105 -WEBDEV TUTORIAL 39 - 28-09-2020-09_00Hrs-SEG-Licao 3.3. UPLOAD - GERENCIANDO A IMAGEN DO PRODUTO - Parte L

https://youtu.be/KDNZp3Nrwgo

Esse Ao Vivo vai estrear as 09:00 do dia 28/09/2020-SEG

Nenhum comentário:

Postar um comentário