Avant d'introduire le texte principal, permettez-moi d'introduire les connaissances de Plupload.
Introduction à Plupload
Plupload est développé par les développeurs de TinyMCE, offrant un plug-in de téléchargement hautement disponible pour votre système de gestion de contenu ou des programmes de téléchargement similaires. Plupload est actuellement divisé en une API de base et un composant de file d'attente JQuery Téléchargez, qui vous permet de l'utiliser directement ou de le personnaliser vous-même.
Fonction Plupload
Plupload utilise les composants jQuery comme composant de file d'attente pour sélectionner des fichiers et télécharger des fichiers.
Plupload utilise Flash, Silverlight, HTML5, Gears, BrowserPlus et Fileupload pour télécharger des moteurs de technologie de fichiers.
Plupload permet à la personnalisation d'utiliser l'API Plupload Core pour sélectionner les fichiers et télécharger des fichiers.
JavaScript est utilisé pour activer la boîte de dialogue de sélection de fichiers. Cette boîte de dialogue de sélection de fichiers peut être définie pour permettre aux utilisateurs de sélectionner un fichier séparé ou plusieurs fichiers. Le type de fichier sélectionné peut également être restreint, de sorte que l'utilisateur ne peut sélectionner que le fichier approprié spécifié, tel que JGP; GIF.
Plupload permet la personnalisation de certains événements pendant le processus de téléchargement et écrire sa propre méthode de traitement.
Le téléchargement du fichier sélectionné est indépendant de la page et du formulaire où il est situé. Chaque fichier est téléchargé séparément, ce qui garantit que le script côté serveur peut gérer un seul fichier plus facilement à un moment donné. Pour des informations spécifiques, veuillez visiter le site officiel de Plupload: http://www.plupload.com/
Contexte: Le contrôle de téléchargement de fichiers frontal utilisé dans le projet a été téléchargé, et tout a été paisible pendant un certain temps. "Good News" est venu de la scène, et le client voulait utiliser le système iPad et voulait télécharger des photos. Le maître client a giflé son front et a dû faire des heures supplémentaires sur la R&D. Comme vous le savez tous, le téléchargement dépend de Flash, il n'est donc pas possible sur les systèmes iOS et Mac. Donc, après un peu de Google, j'ai trouvé le Plupload. Il est plus facile de commencer.
Page Code HTML:
La balise de tête contient les fichiers JS nécessaires
<script type = "text / javascript" src = "js / jquery-1.9.1.min.js"> / script>
<! - One de dialogue d'art ->
<script type = "text / javascript" src = "artDialog / artDialog.source.js? skin = blue"> </ script>
<! - Plupload ->
<script type = "text / javascript" src = "Plupload / Plupload.full.js"> </ script>
Éléments de page dans la balise corporelle
<! - Déclenchez la boîte contextuelle -> <a id = "uploadBtn" href = "#"> Fichier Téléchargement </a> <div id = "uploadContent" style = "Affichage: Aucun; Height: 300px; Overflow-x: Hidden; Overflow-y: Auto;"> <div id = "ChoisInFile"> <Spank File prend en charge moins que 100m href = "JavaScript: void (0);"> SELECT Fichier </a> </div> <div id = "uploadFilequeue" style = "Border: 1px solide # a7c5e2; hauteur: 228px; width: 350px;"> </ div> </div> <pre id = "console"> </ pre>;
Code dans la balise de script
var globalUploader; function _plupload () {var uploader = new Plupload.uploader ({runtimes: 'html5, flash, silverlight, html4', browse_button: 'uploadify', // L'attiport id de l'objet DOM parcourant le fichier sur la page contient: 'uploadcontent', // le disqueur de la page: 'uploadcontent', // la contrawer_button: décompte: détruit. '/uploadAction!Localupload.action' ,///receive Actionflash_Swf_Url Téléchargé par fichier:' /folder/js/plupload/moxie.swf'mesilverlight_xap_url: '/folder/js/plupload/moxie.xap' MIME_TYPES: [// Limite Téléchargez le type de fichier {Title: "Fichiers d'image", Extensions: "JPG, GIF, PNG"}]}, init: {Postinit: function () {$ ('# uploadFileeue'). Fonction (UP, fichier) {// fréquemment avant le téléchargement après avoir cliqué sur le bouton. $ .ajax ({url: "/ dossier / personnel / personnel! getnewfilename.action", type: "post", async: false, data: {'upFileName': file.name, 'globalpid': globalpid}, dataType: "json", réussi {upFileName: data.newFileName, upFileType: file.name.split (".") [file.name.split ("."). Length - 1], // suffixe upfilesize: file.size, parentid: globalpid});}, error: function (xmlhttpreest, textstatus, errorthRown) {Messagallert, "Sortie, Sortie, TextSatus file ["+ file.name +"] n'a pas réussi à télécharger ", ''); // $ ('# uploadify'). uplowify ('annuler', file.id); // annuler une tâche de téléchargement en appuyant sur id}});}, href =" javascrip File.name + '(' + Plupload.FormatSize (file.size) + ') </span> <b> </b> <div> <div> </div> </div> </div> </div>'); i ++;});}, uploadProgress: function (up, file) {// cliquez pour démarrer et le déclencher. Ici, vous pouvez ajouter une barre de progression, en utilisant file.percentDocument.getElementById (file.id) .getElementsByTagName ('B') [0] .InnerHtml = '<span> -' + file.percent + "% </spany-wearfy-progress-bar '). '%'); // Bar de progression}, erreur: fonction (up, err) {// error déclencheur document.getElementById ('console'). Innerhtml + = "/ nerror #" + err.code + ":" + err.Message;}, fileuploaded: function (up, fichier, info) {// déclencheur (déclencheur (déclenchent uploting // tire lorsque un fichier est un fichier avec succès. "(" + info.Response + ")"); // les données renvoyées par le serveur, vous pouvez modifier la liste de fichiers sur la page, etc.}, uploadComplete: fonction (up, fichiers) {// Tous les fichiers sont déclenchés après le téléchargement // feux lorsque tous les fichiers dans une file d'attente sont téléchargés.}}}); uploger.Init (); GlobalUpLoader = uploader;} fonction; popupDialog () {artDialog ({id: 'file-upload', title: 'File upload', fixe: true, lock: true, contenu: $ ("# uploadContent") [0], bouton: [{name: 'start upload', focus: true: callback: function () {GlobalUploadher.start (); return false;}}, {name: 'close', callback: return false;}}, {name: 'closer', callback: return false;}}, {name: 'close', callback: return false;}}, {name: 'close', Calleback: Return; function () {$ ('# uploadFileQueue'). html (''); // supprimer le contenu de la file d'attente de téléchargement globalploader.files.splice (0, globaluploader.files.length); // effacer le contenu dans la file d'attente de téléchargement return true;}}], close: function () {$ ('# uploadfilequeeue'). le contenu de la file d'attente de téléchargement globaluploader.files.splice (0, globaluploader.files.length); // efface le contenu dans la file d'attente de téléchargement}});} $ (function () {$ ('# uploadBtn'). Click (function () {popupdialog ();}); _ Plupload ();});Je n'écrirai pas le code d'arrière-plan. J'ai utilisé l'action backend Struts2 pour recevoir le fichier reçu en utilisant le fichier privé. Changez l'autre nom en null. Je ne sais pas encore comment définir cette valeur dans le contrôle.
Alors c'est l'effet
Si vous souhaitez ajouter ces styles CSS à la barre de progression, vous avez le contrôle
<style type = "text / css"> # uploadFileQueue {position: relatif; gauche: 0; top: 0; bordure: 1px solide # a7c5e2; margin-boot: 5px; hauteur: 228px; width: 350px-outer-x: Hidden; overflow-y: auto;}. # F5f5f5; *! * / marge: 5px 5px 5px 5px; max-largeur: 350px; padding: 10px;}. uploadify-progress {background-Color: # e5e5e5; margin-top: 10px; width: 100%;}. uploadify-progress-bar {background-color: # 0099ff; height: 3px; width: 1px;} </ style>L'effet final. Quoi, je veux aussi télécharger pour supprimer le fichier dans la fourche de file d'attente, ok
Ajoutez cela dans le style
.Uploadify-queue-item .cancel a {background: url ('js / uploadify-cancel.png') 0 0 no-repeat; float: right; height: 16px; text-invent: -9999px; width: 16px;}Bien sûr, vous devez également ajouter du code JS supprimé. Il y a ici destiner (fichier) dans l'API officielle, mais il n'est pas facile à utiliser ici. Ainsi, une autre méthode est utilisée pour diviser (num, longueur), NUM est supprimée du premier, et la longueur est le nombre de supprimés.
fonction _plupload_removefile (removenum, fileid) {globaluploader.files.splice (removenum, 1); // supprimer certains fichiers $ (fileId) .fadeout ();}Effet final.
Ce qui précède est le Plupload + ArtDialog introduit par l'éditeur pour réaliser des fichiers de téléchargement multiplateforme. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!