Estou feliz em dizer que muitos desenvolvedores encontraram seu caminho para Jasny Bootstrap. Especialmente o componente de upload de arquivo, é muito popular. Ele pode substituir qualquer <input type="file">elemento normal para exibir um widget agradável que é consistente em todos os navegadores e pode mostrar uma visualização de imagens.
A documentação mostra o HTML a ser usado, mas não mostra como usá-lo com arquivos existentes. Vou explicar aqui.
O básico
O HTML permanece basicamente o mesmo. Altere fileupload-new para fileupload-exists para o contêiner div .fileupload (linha 1). Coloque o para a imagem existente no div .fileupload-preview div (linha 4). Se você não for a visualização da imagem, coloque o nome do arquivo no
.fileupload-previewdiv.
<div class="fileupload fileupload-exists" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" /></div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;">
<img src="/images/example.png">
</div>
<div>
<span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" name="myimage" /></span>
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
</div>
</div>Quando um usuário pressiona enviar sem alterar ou remover a imagem, a postagem do formulário contém uma entrada para ‘minhaimagem’ sem um novo arquivo. Quando limpar é pressionado, o valor de ‘minhaimagem’ é uma string vazia. Em PHP, você pode lidar com isso como
if (isset($_POST['myimage']) && $_POST['myimage'] == '') {
// Delete file
} elseif ($_FILES['myimage']['error'] == 0) {
// Save uploaded file
}Omitir do POST
No entanto, em algumas linguagens e estruturas, você não pode fazer facilmente a distinção entre nenhum arquivo selecionado e a postagem contendo uma string vazia. Nesse caso, você pode usar o data-nameatributo e deixar o atributo ‘nome’ no <input type="file">.
<div class="fileupload fileupload-exists" data-provides="fileupload" data-name="myimage">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" /></div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;">
<img src="/images/example.png">
</div>
<div>
<span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
</div>
</div>Agora, quando o usuário pressiona enviar sem alterar ou limpar o arquivo, a entrada ‘myimage’ não fará parte dos dados de postagem. No próximo exemplo de PHP, ambos $_FILESe $_POSTsão processados e presentes em $data.
if (isset($data['myimage'])) {
if ($data['myimage'] == '') {
// Delete file
} else {
// Handle uploaded file
}
}Publicar um valor específico
Em alguns casos, isso ainda não funcionará, por exemplo, quando você estiver usando um construtor de formulários que combina os padrões com os dados postados. Nesse caso, você pode adicionar manualmente o <input type = “hidden”> e defini-lo com um valor específico. (No exemplo a seguir, ‘1 ′ é escolhido, mas você também pode usar o nome de base do arquivo ou o que quiser.)
<div class="fileupload fileupload-exists" data-provides="fileupload" data-name="myimage">
<input type="hidden" name="myimage" value="1" />
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" /></div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;">
<img src="/images/example.png" />
</div>
<div>
<span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
</div>
</div>Neste caso, quando o usuário pressiona enviar sem alterar ou limpar o arquivo, a entrada ‘myimage’ será ‘1 ′. Quando o usuário limpar a imagem, ela será uma string vazia. No próximo exemplo de PHP, ambos $_FILESe $_POSTsão processados e combinados com todos os valores padrão / originais como $data.
Por favor contribua
Se você estiver usando o componente de upload de arquivo com Ruby, Python, C # ou Java, deixe um comentário com um exemplo em sua linguagem. Obrigado.