Fóruns ou barras de postagem geralmente precisam compartilhar muitas fotos. A má maneira de fazer upload de imagens é enviá -las para o servidor central e encaminhá -las para o servidor de imagens estáticas. Este artigo apresenta como usar o PLUPLOAD para otimizar o processo de upload e ignorar o servidor para fazer upload diretamente de imagens em lotes para o YouPai Cloud. Este artigo falará sobre os seguintes pontos -chave:
A cópia do código é a seguinte:
Biblioteca Plupload
Compressão local de fotos
Múltiplas fotos de seleção
Ignorar o servidor e fazer upload de fotos diretamente para YouPaiyun
Usando a API do formulário HTTP
Configuração do PLUPLOAD
Biblioteca Plupload
O PLUPLOAD é um plugin de upload de imagens muito rico. Os navegadores de baixa versão podem suportar uploads em lote através do Flash/Silverlight/HTML4, enquanto nos navegadores de maior versão, eles terão prioridade para fazer upload usando a interface HTML5. Tudo isso é automático e pode -se dizer que é muito conveniente de usar! Em segundo lugar, o PLUPLOAD também suporta funções, como compactar imagens no cliente e carregá -las diretamente no Drag & Drop. Para detalhes, você pode ir ao site oficial para aprender mais informações.
Aqui usamos apenas sua API principal, basta apresentar um arquivo.
A cópia do código é a seguinte:
<script src = "lib/plupload-2.1.2/js/plupload.full.min.js"> </sCript>
Os exemplos principais da API fornecidos pelo funcionário são muito simples, você pode visualizá -los diretamente em http://www.plupload.com/examples/core. Não há dificuldades em entender a API central. Se precisar de ajuda, poderá me fazer uma pergunta mais adiante neste artigo.
Compressão local de fotos
Geralmente, a qualidade das fotos que você navega nas páginas da web não é alta. Lembro que quando eu estava estudando PS no ensino médio, o professor disse que a resolução das fotos on -line seria de 72, e as imagens impressas teriam que ser de 300. Portanto, quando os usuários enviam uma foto grande, é melhor usá -la para compactar a imagem localmente no cliente do usuário e fazer o upload da uppressor e a velocidade que não afetará o efeito de broca, mas também a aceleração da pressão.
A função de compressão local da imagem é suportada no PLUpload, basta passar em um parâmetro de redimensionamento ao inicializá -la. Entre eles, a largura e a altura podem ser definidas de acordo com a situação real, e a qualidade é um parâmetro relativamente importante. Como o nome sugere, quanto menor o valor é definido, menor a imagem, mas pior será a qualidade da tela. Você precisa pesar isso sozinho.
A cópia do código é a seguinte:
{
"redimensionar": {
"Largura": 200,
"Altura": 200,
"Qualidade": 70
}
}
Múltiplas fotos de seleção
Um dos pré -requisitos para o upload de imagens em lote é a capacidade de selecionar várias imagens. Os arquivos de seleção múltipla são um recurso padrão do HTML5. Podemos ativar o modo multi-seletivo das seguintes maneiras:
A cópia do código é a seguinte:
<form ação = "xxx">
Selecione imagens: <input type = "file" name = "img" múltiplo> <!- múltiplo é a chave aqui! ->
<input type = "envie">
</morm>
De acordo com a seção de seleção de arquivos múltiplos na seção no suporte do navegador do JQuery-File-Upload, o IE desenvolveu até o IE10 que ele começou a suportar recursos HTML5, por isso precisamos usar o poder mágico do Flash para suportar imagens de múltiplas seleções para navegadores de versão inferior. Felizmente, o PLUPLOAD nos ajudou a fazer isso, e esse interruptor é ativado por padrão. Se você acha que não precisa usar imagens múltiplas selecionadas, pode definir o Multi_Selection: false para desativar esse recurso.
Ignorar o servidor e fazer upload de fotos diretamente para YouPaiyun
O YouPaiyun fornece uma API de formulário HTTP. Por meio dessa interface, podemos iniciar diretamente uma solicitação para fazer upload de imagens do navegador sem precisar transferir através de nosso próprio servidor, o que reduz bastante a sobrecarga.
Usando a API do formulário HTTP
Usando essa interface, você precisa enviar um formulário para YouPaiyun. Este formulário contém o arquivo que você deseja fazer e também precisa incluir política e assinatura. A política é usada para transferir parâmetros relacionados às solicitações de upload, como caminho de economia, tipo de arquivo, resultados de pré -processamento, etc., e também inclui o tempo de concessão da solicitação de upload, etc. A assinatura é usada para verificação de segurança.
Para conveniência de demonstração, usamos o JavaScript diretamente para gerar políticas e assinaturas aqui. Mas, no uso real, por motivos de segurança, preencha esse processo no lado do servidor. O código a seguir foi modificado com base na demonstração oficial, principalmente usando a conta oficial de teste. Para o método de geração específico desses dois parâmetros, consulte o documento oficial: http://docs.upyun.com/api/form_api/.
A cópia do código é a seguinte:
var options = {
'Bucket': 'demonstração',
'Salve-key': '/test/fileName.txt',
'Expiração': Math.floor (new Date (). gettime () / 1000) + 86400
};
// Veja mais parâmetros: http://docs.upyun.com/api/form_api/#form Introdução da interface da API
var Policy = window.btoa (json.stringify (opções));
// Obtenha a API do formul
var form_api_secret = '1+jy2zqd5uvfw6hq8eesyqo50wo =';
// Calcule a assinatura
var assinatura = md5 (política + '&' + form_api_secret);
Configuração do PLUPLOAD
Como fazer o PLUPLOAD funcionar com a API HTTP da YouPaiyun realmente me deu dor de cabeça. No documento, vendo o aparelho, a inesperada descoberta me fez ver o amanhecer. O upload do link para a Amazon S3 me atraiu. O nome completo do Amazon S3 é o Amazon Simple Storage Service, e os serviços de armazenamento em nuvem que ele fornece são mais ou menos semelhantes aos do YouPaiyun.
Então, com base na introdução à configuração do navegador neste artigo, descobri a configuração necessária para enviá -la para YouPaiyun. De fato, é muito simples dizer, configurando principalmente os dois parâmetros URL e multipart_params. O options.bucket, política e assinatura nos exemplos a seguir são usados diretamente para calcular os valores na seção anterior.
A cópia do código é a seguinte:
VAR Uploader = new Plupload.uploader ({
...
URL: 'http://v0.api.upyun.com/' + options.bucket,
Multipart_params: {
'Nome do arquivo': '$ {filename}', // adicionando isso para manter a consistência nos horários de execução
'Tipo de conteúdo': '',
'Política': política,
'assinatura': assinatura,
},
...
});
Resumir
Dessa forma, finalmente percebemos que ignorando o servidor através do PLUPLOAD e carregando imagens em lotes para YouPaiyun. O PLUPLOAD é realmente uma biblioteca muito poderosa, mas pode ser cobrada para uso comercial. Por favor, vá ao seu site oficial para saber mais!
Não é muito simples? O principal é que a ideia é muito boa e vale a pena aprender. Se você tiver alguma dúvida, deixe -me uma mensagem e todos farão progresso juntos