Wie viel wissen Sie über die Datei-Upload-Funktion von AngularJS? Informieren Sie sich in wenigen Minuten über das Hochladen von AngularJS-Dateien

In diesem Artikel geht es hauptsächlich um die Datei-Upload-Funktion von angularjs. Jeder, der es nicht versteht, kann es lesen. Schauen wir uns gemeinsam diesen Artikel an

ProblembeschreibungAnhang hochladen

Die Testergebnisse werden als Anhänge hochgeladen.

Hier api ignorieren.

Die Aufgabe besteht darin, die Datei durch Anklicken auszuwählen. Anschließend kann die Datei nach der Auswahl gelöscht werden.

Plug-In-Einführung

Ein Plug-In, das im Projekt berücksichtigt wurde, wird verwendet, Angular-File-Upload. Das

-Plug-in ist nur eine Anweisung. Wir deklarieren ein uploader-Objekt in der Anweisung, die es uns zur Verfügung stellt. Dieses Objekt stellt dar, welche Operationen zu verschiedenen Zeiten ausgeführt werden sollen .

Funktionsimplementierung

Verwendung von Anweisungen

Die offizielle Website bietet viele Möglichkeiten, diese Anweisung zu verwenden. Hier wählen wir die einfachste Möglichkeit, Single, um eine einzelne Datei hochzuladen.

<input>

Ein file vom Typ input, verwenden Sie die nv-file-select-Direktive und übergeben Sie der Direktive ein uploader-Objekt als Parameter .

Sehr einfache Logik: Erstellen Sie ein neues FileUploader-Objekt und schreiben Sie dann seine onAfterAddingFile-Methode neu, die nach dem Hinzufügen der Datei ausgeführt wird. Klicken Sie also, um die Datei auszuwählen, wählen Sie die Datei aus und Klicken Sie auf Methode beenden.

Bei dieser Methode laden wir die Datei direkt hoch.

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

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

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

Wenn der Datei-Upload in einen Befehl gekapselt ist, sollte der obige Code in der controller-Methode des Methodenbefehls ausgeführt werden! ! !

Eine ausführliche Erläuterung der Ausführung von compile, controller und link in der Direktive finden Sie unter der korrekten Verwendung von Compile, Controller und Link in der Angular-Direktive.

Ursachenanalyse

Es kann sein, dass die nv-file-select-Anweisung während der Implementierung verschiedene Ereignisse in der link-Funktion bindet und unser uploader-Objekt für die Bindung erforderlich ist.

Und wenn wir es in die Funktion link einfügen, wird die Funktion link dieser Anweisung später ausgeführt als die Funktion nv-file-select von link, sodass sie ungültig ist.

Hochladen

// 上传文件
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"
                });
            });
};

Löschen

Was soll ich tun, wenn der Benutzer die falsche Datei hochlädt? Fügen Sie eine übersichtliche Schaltfläche hinzu, die nach dem Hochladen einer Datei angezeigt wird.

// 清空选中文件
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;

Hier liegt jedoch ein Problem vor. Es wird nur der Anhang auf dem Server gelöscht, der Dateiauswahleffekt ist jedoch weiterhin vorhanden und der ausgewählte Dateiname wird hier weiterhin angezeigt.

Die Lösung besteht darin, es mit einem form zu umschließen, den Typ von button auf reset zu setzen und festzulegen, wann die Schaltfläche aktiviert ist angeklickt, der Inhalt in input wird gelöscht. Nachdem

    

        附件         

            <input>         

        

            清除         

    

rrree

auf reset gesetzt wurde, entsteht ein neues Problem. Da dieser Befehl in einer form-Form festgelegt ist, löscht reset auch die anderen.

ng-form

Nehmen Sie ng-form, um das Problem zu lösen.

Dies ist die offizielle Erklärung der ng-form-Direktive:

HTML erlaubt keine Verschachtelung von Formularelementen. Es ist nützlich, Formulare zu verschachteln, beispielsweise wenn die Gültigkeit von a Untergruppe von Steuerelementen muss bestimmt werden.

HTML erlaubt keine Verschachtelung von form-Elementen, ng-form wird zum Verschachteln von form verwendet, wenn eine untergeordnete form-Gruppe dies erfordert Seien Sie verifiziert. (Wenn Sie mehr erfahren möchten, besuchen Sie die chinesische PHP-Website angularjs Learning Manual , um mehr zu erfahren)

Aber ng-form implementiert nicht die Funktionen von form, also ng-submit kann nicht verwendet werden. Denken Sie darüber nach. Wenn ng-form auch submit sein kann, ein form von submit, wer sollte es einreichen? button

Optimierung

Dies ist nur das einfachste Anwendungsszenario. Was ist, wenn Sie eine große Datei mit Dutzenden

s hochladen müssen? M

Wenn Sie ein Freund sind, der Computernetzwerke studiert hat, kommt Ihnen diese Implementierung bekannt vor? Ist das nicht das, was der Router tut, wenn er feststellt, dass ein anderes Netzwerk nicht so viele Daten auf einmal übertragen kann? Das Prinzip des Computernetzwerks ist immer noch einigermaßen nützlich.

Genau wie beim letzten Entwurf des yunzhiTrueOrFalse-Filters habe ich die Natur der Datenstruktur verstanden. Datenstrukturen sind eigentlich Daten-„Strukturen“.

Wir sagen, dass Map eine Datenstruktur ist, aber können wir die Aufgabe ohne HashMap erledigen?

kann auch verwendet werden, zwei Arrays, eines zum Speichern von key, eines zum Speichern von value und for können in einer Schleife ausgeführt werden. Dann stellte die Java-Community fest, dass es dafür zu viele Anwendungsszenarien gab und die Verwendung zu mühsam war, und implementierte daher eine solche Datenstruktur JDK in HashMap. (Das ist eine Geschichte, die ich mir ausgedacht habe!)

Nach der Abstraktion ist alles bequemer. Wenn Sie eines Tages feststellen, dass die vorhandene Datenstruktur Ihre Szenenanforderungen nicht erfüllen kann, öffnen Sie das Buch und entwerfen Sie selbst eine.

Dieser Artikel endet hier. Wenn Sie mehr sehen möchten, besuchen Sie bitte die chinesische PHP-Website AngularJS-Referenzhandbuch, um mehr zu erfahren.

Das obige ist der detaillierte Inhalt vonWie viel wissen Sie über die Datei-Upload-Funktion von AngularJS? Informieren Sie sich in wenigen Minuten über das Hochladen von AngularJS-Dateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!