Cet article décrit la méthode de téléchargement de plusieurs fichiers et de limiter le nombre de fichiers dans swfupload. Partagez-le pour votre référence, comme suit:
SWFupload est un composant de téléchargement de fichiers client basé sur Flash et JavaScript.
fichier handlers.js
Fixe de fichiers complète (FileQueued) →
Terminez la sélection du fichier (FileDialogComplete) → Démarrage du démarrage (UploadStart) → Téléchargez le traitement (UploadProgress) → Téléchargez le succès (téléchargement) → Télécharger l'achèvement (uploadComplete) →
halte
Comme indiqué ci-dessus, si les fonctions de rappel ci-dessus sont exécutées en séquence avec des fichiers à sélection unique, il convient de noter que plusieurs fichiers sont sélectionnés. FileQueued et Qu queuecomplete ne seront exécutés qu'une seule fois, tandis que FileDialogComplet ... → UploadComplete sera exécuté une fois par fichier.
Après avoir rempli les fonctions de base en référence à l'exemple officiel, l'imitation Ganji adopte une méthode IFRAME.
Afin d'atteindre la limite du nombre d'aperçu de la vignette et le nombre d'images supprimées et téléchargées
Afficher les miniatures, générer des boutons pour supprimer les vignettes,
Thumbimages Affiche des divs de miniatures pour la page parent
SRC_S est l'adresse miniature générée
SRC_B est l'adresse d'image d'origine
ServerData est les données renvoyées par la page de traitement de téléchargement d'image. Il sera retourné sous le format du succès | Adresse de vignette | Adresse originale | Adresse originale
Fonction Téléchargement de chargement (fichier, serverdata) {try {var result = serverdata.split ('|'); if (result [0]! = 'Success') {var Progress = new FileProgress (fichier, this.customsettings.progresstarget); Progress.SetError (); Progress.SetStatus (serverdata); Progress.togGlECCardel (false); } else {var progress = new FileProgress (fichier, this.customsettings.progresstarget); Progress.SetComplete (); Progress.SetStatus ("Téléchargement complet"); Progress.togGlECCardel (false); var img_url_s = résultat [1]; var img_url_b = résultat [2]; addImage (img_url_s, img_url_b); }} catch (ex) {this.debug (ex); }} fonction addImage (src_s, src_b) {var newDiv = parent.Document.CreateElement ("div"); newDiv.style.margin = "5px"; newDiv.style.height = "60px"; newDiv.style.width = "80px"; newDiv.style.border = "1px solide # 7f9db9"; newDiv.style.cssfloat = "Left"; newDiv.style.stylefloat = "Left"; newDiv.style.position = "relatif"; var newa = parent.Document.CreateElement ("A"); newa.classname = "Delete"; newa.title = "Delete"; newa.href = "javascript ::"; newa.onclick = function () {deldiv (newDiv);}; var newInput_s = parent.Document.CreateElement ("Input"); newInput_s.type = "Hidden"; newInput_s.value = src_s; newInput_s.name = "image_s []"; newa.appendChild (newInput_s); var newInput_b = parent.Document.CreateElement ("Input"); newInput_b.type = "Hidden"; newInput_b.value = src_b; newInput_b.name = "image_b []"; newa.appendChild (newInput_b); var newImgDiv = parent.Document.CreateElement ("div"); var newImg = parent.Document.CreateElement ("img"); newimg.style.height = "60px"; newimg.style.width = "80px"; NewImgDiv.ApendChild (NewImg); NewDiv.ApendChild (NewImgDiv); Newdiv.ApendChild (Newa); Parent.Document.getElementById ("Thumbimages"). APPENDCHILD (NewDiv); if (newImg.Filters) {try {newImg.Filters.item ("dxiageTransform.microsoft.alpha"). Opacity = 0; } catch (e) {// s'il n'est pas défini initialement, le navigateur lancera une erreur. Cela le définira s'il n'est pas encore défini. newImg.style.filter = 'PROGID: dximageTransform.microsoft.alpha (opacity =' + 0 + ')'; }} else {newimg.style.opacity = 0; } newImg.onload = function () {fadein (newImg, 0); }; newImg.src = src_s;} fonction fadein (élément, opacity) {var réteintopacityy = 5; Taux var = 30; // 15 ips if (opacité <100) {Opacity + = réduction Opacityy; if (opacity> 100) {opacity = 100; } if (element.filters) {try {element.filters.item ("dxiagetransform.microsoft.alpha"). opacity = opacity; } catch (e) {// s'il n'est pas défini initialement, le navigateur lancera une erreur. Cela le définira s'il n'est pas encore défini. element.style.filter = 'PROGID: dximageTransform.microsoft.alpha (opacity =' + opacity + ')'; }} else {element.style.opacity = opacity / 100; }} if (opacité <100) {setTimeout (function () {fadein (élément, opacité);}, rate); }}Concernant le traitement du nombre restant de fichiers téléchargés
Function QueueComplete (numFilesuploaded) {this.setButTonDisabled (false); var stats = this.getStats (); var status = document.getElementById ("DivStatus"); status.innerhtml = "Uploaded" + stats.sucussful_uploads + "Files, vous pouvez également télécharger" + parseInt (this.settings ['file_upload_limit'] - stas.Successful_uploads) + "files";} function dediv (mydiv) {mydiv.parentNode.Removechild (mydiv); // swfu voir swfu dans la page iframe swfu = new swfupload (paramètres); var statts = swfu.getStats (); stats.sucussful_uploads--; swfu.setStats (statistiques); var status = document.getElementById ("DivStatus"); status.innerhtml = "Uploaded" + stats.sucussful_uploads + "Un fichier, peut également être téléchargé" + parseInt (swfu.settings ['file_upload_limit'] - stats.sucussful_uploads) + "files";};Cela peut être dû à l'utilisation de iframe
La fonction SWFU dans Deldiv ne peut pas être remplacée par ce
L'effet global est comme indiqué sur la figure:
Après avoir téléchargé l'image et modifié à nouveau les informations, vous devez obtenir le nombre d'images téléchargées et les combiner dans swfupload
Obtenez le chemin d'image téléchargé de l'arrière-plan via PHP et donnez-le à un tableau JS via Smarty
var img_arr = new array (); {if isset ($ img_arr)} {section name = 'img_arr' loop = $ img_arr} img_arr [{$ smarty.section.img_arr.index}] = new Array ('{$ img_arr [img_arr] .images_s}', '{$ img_arr [img_arr] .images_b}'); {/ section} {/ if}Interrogez le document SWFupload pour obtenir les informations suivantes
flashReady ()
Cette fonction d'événement est un événement interne et ne peut pas être réécrite. Cet événement est déclenché lorsque le swfupload est instancié et que le flash chargé termine toutes les opérations d'initialisation.
Rappel: swfupload_loaded_handler dans les paramètres correspondants
Définissez donc swfupload_loaded_handler dans les paramètres swfupload
swfupload_loaded_handler: chargé,
Définissez ensuite la fonction chargée dans Handlers.js
fonction chargé () {if (img_arr.length! = 0) {for (val in img_arr) {addImageFromdb (img_arr [val] [0], img_arr [val] [1], this); }}}Appelez la fonction AddImageFromDB pour modifier le nombre d'images téléchargées et générer des miniatures d'images téléchargées
// Initialisez la fonction d'image téléchargée addImageFromdb (src_s, src_b, swfu) {var statts = swfu.getStats (); stats.sucussful_uploads ++; swfu.setStats (statistiques); var status = document.getElementById ("DivStatus"); status.innerhtml = "Uploaded <Font Color = 'Green'>" + stats.sucussful_uploads + "</font> zhang, vous pouvez également télécharger <font color = 'red'>" + parseint (swfu.settings ['file_upload_limit'] - statistiques; addImage (src_s, src_b);}Pour plus d'informations sur le contenu lié à JavaScript, veuillez consulter les sujets de ce site: "Résumé des effets et techniques de commutation JavaScript", "Résumé des effets et techniques de recherche JavaScript", "Résumé des erreurs Javascript et des techniques de débogage" Algorithmes et techniques de traversée JavaScript ", et" Résumé de l'utilisation des opérations mathématiques JavaScript "
J'espère que cet article sera utile à la programmation JavaScript de tous.