Les forums ou les bars de poste ont souvent besoin de partager beaucoup de photos. La mauvaise façon de télécharger des images est de les télécharger sur le serveur central, puis de les transmettre au serveur d'image statique. Cet article présente comment utiliser Plupload pour optimiser le processus de téléchargement et contourner le serveur pour télécharger directement des images en lots sur YouPai Cloud. Cet article parlera des points clés suivants:
La copie de code est la suivante:
Plupload Library
Compression locale d'images
Plusieurs images de sélection
Contourner le serveur et télécharger des photos directement sur youpaiyun
Utilisation de l'API du formulaire HTTP
Configuration de Plupload
Plupload Library
Plupload est un plugin d'image très riche. Les navigateurs à faible version peuvent prendre en charge les téléchargements de lots via Flash / Silverlight / HTML4, tandis que dans les navigateurs de version supérieure, ils seront prioritaires à télécharger à l'aide de l'interface HTML5. Tout cela est automatique, et on peut dire qu'il est très pratique à utiliser! Deuxièmement, Plupload prend également en charge des fonctions telles que la compression d'images sur le client et les télécharger directement sur glisser-déposer. Pour plus de détails, vous pouvez vous rendre sur son site officiel pour en savoir plus d'informations.
Ici, nous utilisons uniquement son API de base, introduisez simplement un fichier.
La copie de code est la suivante:
<script src = "lib / plupload-2.1.2 / js / plupload.full.min.js"> </ script>
Les exemples de l'API principaux donnés par le fonctionnaire sont très simples, vous pouvez les visualiser directement sur http://www.plupload.com/examples/core. Il n'y a aucune difficulté à comprendre l'API principale. Si vous avez besoin d'aide, vous pouvez me poser une question plus tard dans cet article.
Compression locale d'images
Généralement, la qualité des images que vous parcourez sur les pages Web n'est pas élevée. Je me souviens que lorsque j'étudiais le PS au lycée, l'enseignant a dit que la résolution des images en ligne serait de 72, et les images imprimées devraient être de 300. Par conséquent, lorsque les utilisateurs téléchargent une grande photo, il est préférable de l'utiliser pour compresser l'image localement sur le client de l'utilisateur et télécharger la plus petite photo compressée, ce qui n'affectera pas le serveur de navigation, mais aussi la vitesse de téléchargement et de réduir le bord du serveur.
La fonction de compression locale de l'image est prise en charge dans le Plupload, passe simplement dans un paramètre de redimensionnement lors de l'initialisation. Parmi eux, la largeur et la hauteur peuvent être fixées en fonction de la situation réelle, et la qualité est un paramètre relativement important. Comme son nom l'indique, plus la valeur est définie, plus l'image est petite, mais plus la qualité de l'affichage sera pire. Vous devez peser vous-même vous-même.
La copie de code est la suivante:
{
"redimensionner": {
"largeur": 200,
"Hauteur": 200,
"Qualité": 70
}
}
Plusieurs images de sélection
L'une des conditions préalables au téléchargement par lots d'images est la possibilité de sélectionner plusieurs images. Les fichiers à sélection multiple sont une caractéristique standard de HTML5. Nous pouvons activer le mode multi-sélection de la manière suivante:
La copie de code est la suivante:
<form action = "xxx">
Sélectionnez Images: <entrée type = "fichier" name = "img" multiple> <! - Multiple est la clé ici! ->
<input type = "soumi">
</ form>
Selon la section Sélection de fichiers multiples dans la prise en charge du navigateur de JQuery-File-upload, IE a développé jusqu'à IE10 qu'il vient de commencer à prendre en charge les fonctionnalités HTML5, nous devons donc utiliser la puissance magique de Flash pour prendre en charge les images à sélection multiple pour les navigateurs de version inférieure. Heureusement, Plupload nous a aidés à le faire, et ce commutateur est activé par défaut. Si vous pensez que vous n'avez pas besoin d'utiliser des images multi-sélectionnées, vous pouvez définir Multi_Selection: False pour désactiver cette fonctionnalité.
Contourner le serveur et télécharger des photos directement sur youpaiyun
YouPaiyun fournit une API de formulaire HTTP. Grâce à cette interface, nous pouvons initier directement une demande de téléchargement d'images à partir du navigateur sans avoir à transférer via notre propre serveur, ce qui réduit considérablement la surcharge.
Utilisation de l'API du formulaire HTTP
En utilisant cette interface, vous devez envoyer un formulaire à YouPaiyun. Ce formulaire contient le fichier que vous souhaitez télécharger et doit également inclure la politique et la signature. La stratégie est utilisée pour transférer des paramètres liés aux demandes de téléchargement, telles que le chemin de sauvegarde, le type de fichier, les résultats de prétraitement, etc., et comprend également l'heure de subvention de la demande de téléchargement, etc. La signature est utilisée pour la vérification de la sécurité.
Pour plus de commodité, nous utilisons JavaScript directement pour générer une politique et une signature ici. Mais dans une utilisation réelle, pour des raisons de sécurité, veuillez terminer ce processus du côté du serveur. Le code suivant a été modifié en fonction de la démo officielle, utilisant principalement le compte de test officiel. Pour la méthode de génération spécifique de ces deux paramètres, veuillez vous référer au document officiel: http://docs.upyun.com/api/form_api/.
La copie de code est la suivante:
Var Options = {
«seau»: «démonstration»,
«sauvegarde-key»: «/test/filename.txt»,
'Expiration': math.floor (new Date (). GetTime () / 1000) + 86400
};
// Voir plus de paramètres: http://docs.upyun.com/api/form_api/#form API Interface Introduction
var stratégie = window.btoa (json.stringify (options));
// Obtenez l'API du formulaire à partir du backend de gestion des utilisateurs upyun
var form_api_secret = '1 + jy2zqd5uvfw6hq8eesyqo50wo =';
// Calculez la signature
var signature = md5 (politique + '&' + form_api_secret);
Configuration de Plupload
Comment faire fonctionner Plupload avec l'API HTTP Form de YouPaiyun m'a vraiment donné mal à la tête. Dans le document en regardant le Plupload, la découverte inattendue m'a fait voir l'aube. Le téléchargement du lien vers Amazon S3 m'a attiré. Le nom complet d'Amazon S3 est Amazon Simple Storage Service, et les services de stockage cloud qu'il fournit sont plus ou moins similaires à ceux de YouPaiyun.
Ainsi, sur la base de l'introduction à la configuration du navigateur dans cet article, j'ai compris la configuration requise pour la télécharger sur youpaiyun. En fait, il est très simple à dire, configurant principalement les deux paramètres URL et multipart_params. Les options.bucket, la politique et la signature dans les exemples suivantes sont directement utilisées pour calculer les valeurs dans la section précédente.
La copie de code est la suivante:
var uploader = new Plupload.uploader ({{
...
URL: 'http://v0.api.upyun.com/' + options.bucket,
multipart_params: {
'FileName': '$ {nom de fichier}', // l'ajout pour maintenir la cohérence à travers les temps d'exécution
'Content-Type': '',
«Politique»: politique,
«signature»: signature,
},
...
});
Résumer
De cette façon, nous avons finalement réalisé que le contournement du serveur via Plupload et le téléchargement d'images par lots sur youpaiyun. Plupload est vraiment une bibliothèque très puissante, mais elle peut être chargée pour un usage commercial. Veuillez aller sur son site officiel pour en savoir plus!
N'est-ce pas très simple? L'essentiel est que l'idée est très bonne et mérite d'être apprise. Si vous avez des questions, veuillez me laisser un message et tout le monde fera des progrès ensemble