Los foros o las barras de publicaciones a menudo necesitan compartir muchas fotos. La mala manera de subir imágenes es subirlas al servidor central y luego reenviarlas al servidor de imágenes estáticas. Este artículo presenta cómo usar PLUPLOAD para optimizar el proceso de carga y omitir el servidor para cargar directamente imágenes en lotes a Youpai Cloud. Este artículo hablará sobre los siguientes puntos clave:
La copia del código es la siguiente:
biblioteca
Compresión local de imágenes
Fotos de selección múltiples
Omitir el servidor y cargar imágenes directamente a Yopaiyun
Usando la API de formulario HTTP
Configuración de plumas
biblioteca
PLUPLOAD es un complemento de carga de imágenes muy rico. Los navegadores de baja versión pueden admitir cargas de lotes a través de Flash/Silverlight/HTML4, mientras que en los navegadores de mayor versión, se les dará prioridad para cargar utilizando la interfaz HTML5. ¡Todo esto es automático, y se puede decir que es muy conveniente de usar! En segundo lugar, PLUPLOAD también admite funciones como comprimir imágenes en el cliente y cargarlas directamente en Drag & Drop. Para más detalles, puede ir a su sitio web oficial para obtener más información.
Aquí solo usamos su API central, solo introduzca un archivo.
La copia del código es la siguiente:
<script src = "lib/plupload-2.1.2/js/plupload.full.min.js"> </script>
Los ejemplos de API básicos dados por el funcionario son muy simples, puede verlos directamente en http://www.plupload.com/examples/core. No hay dificultades para comprender la API central. Si necesita ayuda, puede hacerme una pregunta más adelante en este artículo.
Compresión local de imágenes
En general, la calidad de las imágenes que navega en las páginas web no es alta. Recuerdo que cuando estudiaba PS en la escuela secundaria, el maestro dijo que la resolución de las imágenes en línea sería de 72, y las imágenes impresas tendrían que ser 300. Por lo tanto, cuando los usuarios cargan una foto grande, es mejor usarla para comprimir la imagen localmente en el cliente del usuario y cargar la imagen más pequeña, que no afectará el efecto de navegación, pero también la velocidad de la velocidad de la velocidad y reducir la velocidad del usuario en el servidor.
La función de compresión local de la imagen se admite en el plupload, simplemente pase en un parámetro de cambio de tamaño al inicializarla. Entre ellos, el ancho y la altura se pueden establecer de acuerdo con la situación real, y la calidad es un parámetro relativamente importante. Como su nombre indica, cuanto más pequeño sea el valor, menor será la imagen, pero peor será la calidad de la pantalla. Necesitas pesar esto tú mismo.
La copia del código es la siguiente:
{
"Redestar": {
"Ancho": 200,
"Altura": 200,
"Calidad": 70
}
}
Fotos de selección múltiples
Uno de los requisitos previos para la carga por lotes de imágenes es la capacidad de seleccionar múltiples imágenes. Los archivos de selección múltiple son una característica estándar de HTML5. Podemos habilitar el modo multiselecto de las siguientes maneras:
La copia del código es la siguiente:
<form de acción = "xxx">
Seleccione imágenes: <input type = "file" name = "img" múltiple> <!- ¡múltiple es la clave aquí! ->
<input type = "enviar">
</form>
De acuerdo con la sección de la selección de archivos múltiples en el soporte del navegador de jQuery-File-Spload, IE se ha desarrollado hasta IE10 que acaba de comenzar a admitir funciones HTML5, por lo que tenemos que usar el poder mágico de Flash para admitir imágenes de selección múltiple para navegadores de versión más bajas. Afortunadamente, PLUPLOAD nos ha ayudado a hacer esto, y este interruptor se enciende de forma predeterminada. Si cree que no necesita usar imágenes múltiples seleccionadas, puede configurar multi_selection: false para desactivar esta función.
Omitir el servidor y cargar imágenes directamente a Yopaiyun
Yopaiyun proporciona una API de formulario HTTP. A través de esta interfaz, podemos iniciar directamente una solicitud para cargar imágenes del navegador sin tener que transferir a través de nuestro propio servidor, lo que reduce en gran medida la sobrecarga.
Usando la API de formulario HTTP
Usando esta interfaz, debe enviar un formulario a Yopaiyun. Este formulario contiene el archivo que desea cargar, y también debe incluir políticas y firmas. La política se utiliza para transferir los parámetros relacionados con las solicitudes de carga, como la ruta de guardado, el tipo de archivo, los resultados del preprocesamiento, etc., y también incluye el tiempo de subvención de solicitud de carga, etc. La firma se utiliza para la verificación de seguridad.
Para conveniencia de demostración, utilizamos JavaScript directamente para generar políticas y firmas aquí. Pero en uso real, por razones de seguridad, complete este proceso en el lado del servidor. El siguiente código se ha modificado en función de la demostración oficial, principalmente utilizando la cuenta de prueba oficial. Para el método de generación específico de estos dos parámetros, consulte el documento oficial: http://docs.upyun.com/api/form_api/.
La copia del código es la siguiente:
opciones var = {
'Bucket': 'demostración',
'Save-key': '/test/filename.txt',
'Cambiar': Math.floor (nueva fecha (). GetTime () / 1000) + 86400
};
// ver más parámetros: http://docs.upyun.com/api/form_api/#forma interfaz de la api introducción
Var Policy = Window.BTOA (JSON.Stringify (Opciones));
// Obtener una API de formulario del backend de gestión de usuarios de Upyun
var form_api_secret = '1+jy2zqd5uvfw6hq8eesyqo50wo =';
// Calcular la firma
var firma = md5 (política + '&' + form_api_secret);
Configuración de plumas
Cómo hacer que el funcionamiento de la API de formulario HTTP de Yopaiyun realmente me dio dolor de cabeza. En el documento que veía el pluplo, el descubrimiento inesperado me hizo ver el amanecer. El enlace Subiendo a Amazon S3 me atrajo. El nombre completo de Amazon S3 es el servicio de almacenamiento simple de Amazon, y los servicios de almacenamiento en la nube que proporciona son más o menos similares a los de Yopaiyun.
Por lo tanto, en base a la introducción a la configuración del navegador en este artículo, descubrí la configuración requerida para cargarla a Yopaiyun. De hecho, es muy simple de decir, principalmente configurando los dos parámetros URL y multipart_params. Las opciones.bucket, la política y la firma en los siguientes ejemplos se utilizan directamente para calcular los valores en la sección anterior.
La copia del código es la siguiente:
var uploader = new plupload.uploader ({
...
URL: 'http://v0.api.upyun.com/' + options.bucket,
multipart_params: {
'FileName': '$ {FileName}', // Agregar esto para mantener la consistencia en los tiempos de ejecución
'Tipo de contenido': '',
'Política': Política,
'Firma': Firma,
},
...
});
Resumir
De esta manera, finalmente nos dimos cuenta de que omitiendo el servidor a través de pluplo y cargando imágenes en lotes a Yopaiyun. PLUPLOAD es realmente una biblioteca muy poderosa, pero se puede cobrar por uso comercial. ¡Vaya a su sitio web oficial para obtener más información!
¿No es muy simple? Lo principal es que la idea es muy buena y vale la pena aprender. Si tiene alguna pregunta, déjame un mensaje y todos harán progresos juntos