Melhore os controles de upload de arquivos usando jQuery

Ao usar CSS para embelezar elementos de formulário, nunca houve uma boa maneira de embelezar o controle de upload de arquivos. http://www.quirksmode.org/dom/inputfile.html (o site parece ter um erro) fornece um método para embelezar o controle de upload de arquivos. Inspirado neste método, combinei meus próprios projetos para melhorar suas funções. Após melhorias, ele possui as seguintes características:

1. O que o usuário vê não é um botão de upload de arquivo, mas um botão;
2. O formato das imagens pode ser restrito;
3. As imagens selecionadas pelo usuário podem ser exibidas em uma área específica (exceto IE6, Safari e Opera);
4. O controle de upload de arquivo permanece disponível quando o usuário desativa o js.

Encapsulei-o em um plug-in jQuery. Como já existe um plug-in chamado jQuery.fakeFile na Internet, para distingui-lo, vou chamá-lo de jQuery.liveFakeFile. Este artigo apresentará o princípio e o uso deste método.

1. Demanda

O requisito é muito simples, mas sua implementação requer certas habilidades, que são brevemente descritas a seguir:

1. É necessário que o controle de upload de arquivo não apareça, mas sim um botão “carregar imagem”. Quando o usuário clica no botão, uma caixa de diálogo de imagem aparece;
2. Depois de selecionar uma imagem, a imagem é exibida acima do botão. Por padrão, a imagem padrão é exibida;
3. O formato da imagem selecionada é julgado. Caso não atenda aos requisitos, uma mensagem de erro será exibida abaixo do botão e a imagem padrão será exibida.

2. Análise

Perceba o efeito de abrir a caixa de diálogo de seleção de imagem clicando no botão

Há uma caixa de entrada na frente do controle de upload de texto Inspirado por Michael McGrady ( ljzcome uma vez traduzido este artigo), criamos um botão "carregar imagem", então alteramos a propriedade de opacidade do controle de upload de arquivo, definimos como 0, e use a propriedade de posicionamento para fazer com que a área de clique fique acima do botão. Dessa forma, cada clique do usuário parece ser um botão clicado, mas na verdade é o próprio controle de upload de texto.

Exibir imagens selecionadas pelo usuário

Exibir imagens parece muito simples, mas existem diferenças entre os navegadores. O IE6 não pode exibir imagens corretamente e o IE7 pode exibi-las usando o filtro AlphaImageLoder. O Firefox não pode exibir imagens normalmente, mas possui um método para exibir imagens – getAsDataURL(). Outros navegadores Opera e Safari não conseguem exibir imagens corretamente. Portanto, usamos a tecnologia de detecção de navegador para processar diferentes navegadores separadamente e apenas permitimos que navegadores que não podem exibir imagens normalmente exibam texto.

Determinar o formato da imagem

Você só precisa passar na verificação da expressão regular quando o evento de alteração do controle de upload do arquivo for acionado. Depois que os requisitos de formato forem atendidos, a imagem ou o texto do prompt será exibido, caso contrário, uma mensagem de erro será exibida.

análise de usabilidade

Como js é usado para alterar a aparência do controle de upload de arquivo, deve-se garantir que os usuários possam fazer upload de imagens normalmente quando js estiver desabilitado. Então o que colocamos na estrutura HTML deve ser um controle normal de upload de arquivo.