A função de visualização de upload da imagem é usada principalmente para visualizar um efeito antes do upload da imagem. Atualmente, os métodos convencionais incluem principalmente a implementação JS, JQuery e Flash, mas geralmente usamos o JS para implementar a função de visualização de upload de imagens. Vamos dar uma olhada em um exemplo abaixo.
princípio:
Ele é dividido em duas etapas: quando a entrada do upload da imagem é acionada e a imagem local é selecionada, o URL (URL do objeto) do objeto a ser carregado; Atribua o URL do objeto ao atributo SRC da tag IMG pré-escrita para exibir a imagem.
Aqui, precisamos entender o objeto de arquivo, objeto blob e window.url.createObjecturl () Método em javascript.
Objeto de arquivo:
O objeto de arquivo pode ser usado para obter informações sobre um arquivo e também pode ser usado para ler o conteúdo do arquivo. Geralmente, o objeto de arquivo é do objeto Filelist retornado pelo usuário após selecionar um arquivo em um elemento de entrada, ou pode ser um objeto Datatransfer gerado por operações de arrasto e soltar gratuitamente.
Vamos dar uma olhada em obter o objeto Filelist:
A cópia do código é a seguinte:
<script type = "text/javascript" src = "jQuery.js"> </script>
<input id = "upload" type = "arquivo">
<img id = "visualize" src = "">
<script type = "text/javascript">
$ ('#upload'). Alterar (function () {
// Obtenha o primeiro elemento da lista de filas
alert (document.getElementById ('upload'). arquivos [0]);
});
</script>
Objeto BLOB:
Um objeto BLOB é um objeto semelhante a um arquivo que contém dados brutos somente leitura. Os dados em um objeto BLOB não precisam necessariamente ser uma forma nativa em JavaScript. A interface do arquivo é baseada no BLOB, herda as funções do BLOB e se estende para suportar arquivos locais no computador do usuário.
O URL do objeto que queremos obter é realmente obtido do objeto BLOB, porque a interface do arquivo herda o blob. Aqui está a conversão do objeto BLOB em um URL:
A cópia do código é a seguinte:
<script type = "text/javascript">
var f = document.getElementById ('upload'). Arquivos [0];
var src = window.url.createObjecturl (f);
document.getElementById ('visualização'). src = src;
</script>
compatibilidade:
O método acima é adequado para o navegador Chrome
Se for um navegador do IE, você pode usar diretamente o valor de entrada em vez de SRC
Ao visualizar informações on -line, você pode usar diretamente o método getasDataurl () do objeto de arquivo para obter o URL. Agora esse método foi abolido. Da mesma forma, existem métodos getastext () e getasbinary (). Vamos dar uma olhada em um exemplo assim.
A cópia do código é a seguinte:
função getfullpath (obj) {// pegue o caminho completo para a imagem
if (obj) {
// ou seja
if (window.navigator.useragent.indexOf ("msie")> = 1) {
obj.select ();
retornar document.selection.createrange (). text;
}
// Firefox
caso contrário, if (window.navigator.UserAgent.Indexof ("Firefox")> = 1) {
if (obj.files) {
return obj.files.item (0) .GetasDataurl ();
}
retornar obj.value;
}
retornar obj.value;
}
}
Este código é o caminho completo para obter a imagem do cliente
Vamos limitar seu tamanho e formato
A cópia do código é a seguinte:
$ ("#loadfile"). Alterar (function () {
var strsrc = $ ("#loadfile"). val ();
img = nova imagem ();
img.src = getfullPath (strsrc);
// Verifique se o formato do arquivo de upload está correto
var pos = strsrc.LastIndexof (".");
var lastName = strsrc.substring (pos, strsrc.length)
if (lastname.tolowercase ()! = ".jpg") {
alerta ("O tipo de arquivo que você usa é" + lastName + ", a imagem deve ser do tipo jpg");
retornar falso;
}
// Verifique a proporção do arquivo carregado
if (img.Height / img.width> 1.5 || img.Height / img.width <1.25) {
alerta ("A proporção da imagem que você carrega está além do intervalo, e a proporção deve estar entre 1,25-1,5");
retornar;
}
// Verifique se o arquivo carregado é de grandes dimensões
if (img.filesize / 1024> 150) {
Alert ("O tamanho do arquivo que você carrega excede o limite de 150k!");
retornar falso;
}
Entre eles, o LoadFile está o ID do arquivo de entrada HTML. Após seu evento de mudança, ou seja, depois de selecionar o arquivo a ser carregado, deixe a imagem ser exibida na caixa de imagem? Adicione o seguinte código ao final do código acima
A cópia do código é a seguinte:
$ ("#stupic"). Att ("src", getfullpath (this));
Como o jQuery é usado, vamos compartilhar um exemplo de código escrito em jQuery:
A cópia do código é a seguinte:
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head1">
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<script type = "text/javascript" src = "jQuery.js"> </script>
<Script Language = "JavaScript">
$ (function () {
var ei = $ ("#grande");
ei.hide ();
$ ("#img1"). mousemove (função (e) {
ei.css ({top: e.pagey, esquerda: e.pagex}). html ('<img style = "borda: 1px cinza sólido;" src = "' + this.src + '" />'). show ();
}). MouseOut (function () {
ei.hide ("lento");
})
$ ("#f1"). Alterar (function () {
$ ("#img1") .attr ("src", "arquivo: ///"+$ ("#f1") .val ());
})
});
</script>
<style type = "text/css">
#Large {Posição: Absolute; Display: Nenhum; Z-Index: 999;}
</style>
</head>
<Body>
<nome name = "form1" id = "form1">
<div id = "Demo">
<input id = "f1" name = "f1" tipo = "arquivo" />
<img id = "img1">
</div>
<div id = "grande"> </div>
</morm>
</body>
</html>