Que savez-vous de la fonction de téléchargement de fichiers AngularJS ? Informez-vous du téléchargement du fichier AngularJS dans quelques minutes

Cet article parle principalement de la fonction de téléchargement de fichiers de angularjs Quiconque ne le comprend pas peut le lire. J'espère qu'il pourra aider tout le monde. Jetons un coup d'œil ensemble à cet article

Description du problèmeTéléchargement des pièces jointes

Les résultats des tests sont téléchargés sous forme de pièces jointes.

Ignorez api ici.

La tâche accomplie est de cliquer pour sélectionner le fichier, puis le fichier peut être effacé après sélection.

Introduction au plug-in

Un plug-in qui a été reflété dans le projet est utilisé, Angular-file-upload. Le plug-in

est très simple, c'est juste une instruction. Nous déclarons un objet uploader dans l'instruction qu'il nous fournit. Cet objet représente quelles opérations doivent être effectuées à différents moments, un autre mode observateur. .

Implémentation de la fonction

Utilisation des instructions

Le site officiel propose de nombreuses façons d'utiliser cette instruction. Ici, nous choisissons la plus simple, Single, pour télécharger un seul fichier.

<input>

Un file de type input, utilisez la directive nv-file-select et passez lui un objet uploader en paramètre .

Logique très simple, créez un nouvel objet FileUploader, puis réécrivez sa méthode onAfterAddingFile, qui est exécutée après l'ajout du fichier, c'est-à-dire cliquez pour sélectionner le fichier, sélectionnez le fichier, et cliquez sur Terminer une méthode.

Dans cette méthode, nous téléchargeons directement le fichier.

// 新建文件上传实例
self.uploader = new FileUploader();

// 重写文件添加后的方法
self.uploader.onAfterAddingFile = function(fileItem) {
    // 打印日志
    if (config.debug) { console.info('onAfterAddingFile', fileItem); }
    // 上传文件
    self.upload(fileItem);
};

// 传给视图
$scope.uploader = self.uploader;

Si le téléchargement du fichier est encapsulé dans une commande, le code ci-dessus doit être exécuté dans la méthode controller de la commande méthode ! ! !

Pour une explication détaillée de l'exécution de compile, controller et link dans la directive, veuillez vous référer à l'utilisation correcte de la compilation, du contrôleur et du lien dans la directive angulaire.

Analyse des causes

Il se peut que l'instruction nv-file-select lie divers événements dans la fonction link lors de l'implémentation, et notre objet uploader soit requis pour la liaison.

Et si on la met dans la fonction link, la fonction link de cette instruction est exécutée plus tard que la fonction nv-file-select de link, elle est donc invalide.

télécharger

// 上传文件
self.upload = function(data) {
    // 上传文件
    AttachmentService.uploadFile(data._file)
        .then(function success(response) {
                // 将上传成功的附件绑定再ngModel中
                $scope.ngModel = response.data;
                // 显示上传按钮
                self.showClear();
            }, function error() {
                // 提示用户上传失败
                sweetAlert.swal({
                    title: "对不起",
                    text: "上传的附件不能大于1M，请确认附件是否大于1M"
                });
            });
};

Effacer

Que dois-je faire si l'utilisateur télécharge le mauvais fichier ? Ajoutez un bouton clair qui s'affichera après le téléchargement d'un fichier.

// 清空选中文件
self.clear = function() {
    self.deleteFile(scope.ngModel.id);
};

// 删除附件
self.deleteFile = function(id) {
    AttachmentService.deleteFile(id, function success() {
        // 将附件赋为空对象
        scope.ngModel = undefined;
        // 隐藏清空按钮
        self.hideClear();
    });
};

scope.clear = self.clear;

Mais il y a un problème ici. Seule la pièce jointe sur le serveur est supprimée, mais l'effet de sélection de fichier est toujours là et le nom du fichier sélectionné est toujours affiché ici.

La solution est de l'envelopper avec un form, de définir le type de button sur reset, et lorsque le bouton est cliqué, le contenu de input sera effacé. Une fois que

    

        附件         

            <input>         

        

            清除         

    

    <input>     

est défini sur reset, un nouveau problème surviendra car cette commande est définie sous une forme form, reset effacera également les autres.

ng-form

Prenez ng-form pour résoudre le problème.

Voici l'explication officielle de la directive ng-form :

HTML ne permet pas l'imbrication des éléments de formulaire. Il est utile d'imbriquer les formulaires, par exemple si la validité d'un. un sous-groupe de contrôles doit être déterminé.

HTML ne permet pas l'imbrication de form éléments, ng-form est utilisé pour imbriquer form si un groupe form enfant le nécessite Soyez vérifié. (Si vous souhaitez en savoir plus, rendez-vous sur le site PHP chinois angularjs Learning Manual )

Mais ng-form n'implémente pas les fonctions de form, donc ng-submit ne peut pas être utilisé. Pensez-y. Cette conception est également raisonnable. Si ng-form peut aussi être submit, imbriqué form, un submit de button, qui doit le soumettre ?

Optimisation

Ceci n'est que le scénario d'application le plus simple. Que se passe-t-il si vous devez télécharger un fichier volumineux contenant des dizaines de M ?

Si vous êtes un ami qui a étudié les réseaux informatiques, pensez-vous que cette implémentation vous semble familière ? N'est-ce pas ce que fait le routeur lorsqu'il constate qu'un autre réseau ne peut pas transporter autant de données à la fois ? Le principe du réseau informatique est encore quelque peu utile.

Tout comme la dernière fois que j'ai conçu le filtre yunzhiTrueOrFalse, j'ai compris la nature de la structure des données. Les structures de données sont en fait des « structures » de données.

Nous disons que Map est une structure de données, mais pouvons-nous terminer la tâche sans HashMap ?

peut également être utilisé, deux tableaux, un pour stocker key, un pour stocker value et for peuvent être mis en boucle. Ensuite, la communauté Java a trouvé qu'il y avait trop de scénarios d'application pour cela et que c'était trop difficile à utiliser, ils ont donc implémenté une telle structure de données JDK dans HashMap. (C'est une histoire que j'ai inventée !)

Après l'abstraction, tout est plus pratique Si un jour vous constatez que la structure de données existante ne peut pas répondre aux besoins de votre scène, ouvrez le livre et concevez-en une vous-même.

Cet article se termine ici. Si vous souhaitez en savoir plus, veuillez vous rendre sur le site Web PHP chinois Manuel de référence angulairejs pour en savoir plus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!