suchen

Heim >Web-Frontend >js-Tutorial >Verwendung der AngularJS-Datei-Upload-Steuerung ng-file-upload

Verwendung der AngularJS-Datei-Upload-Steuerung ng-file-upload

一个新手
一个新手Original
2017-10-14 09:53:442201Durchsuche

Es gibt zwei AngularJS-Datei-Upload-Steuerelemente, die im Internet zu finden sind:

　angular-file-upload: https://github.com/nervgh/angular-file-upload
　ng -file-upload: https://github.com/danialfarid/ng-file-upload

Diese beiden sind sich sehr ähnlich, sogar die Struktur der js-Datei ist dieselbe. Das Kern-JS ist .min.js, und es gibt auch -shim.min.js, das zur Unterstützung erweiterter Funktionen wie Upload-Fortschrittsbalken und Upload-Pause verwendet wird.

Logischerweise sollte shim.js hinzugefügt werden oder nicht, aber laut tatsächlichen Tests muss shim.min.js enthalten sein, sonst kommt es zu Problemen beim Laden der js-Datei. Aber die Datei angle-file-upload-shim.min.js existiert nicht auf Github! ! !

Also nutzen Sie ng-file-upload! Verwenden Sie ng-file-upload! Verwenden Sie ng-file-upload!

Angular-file-upload ist ein leichtes AngularJS-Datei-Upload-Tool, das für FileAPI-Polyfill entwickelt wurde, keine Browser unterstützt und HTML5 zum direkten Hochladen von Dateien verwendet.
　

特性
　　支持上传进度，在上传的时候，可以取消或者中止，支持文件拖拽（HTML5），目录拖拽（weikit），CORS， PUT(html5)/POST 方法

　　支持使用 Flash polyfill FileAPI  跨浏览器上传 (HTML5 和 non-HTML5) 。允许客户端在上传之前验证或者修改文件。

　　当文件的内容类型使用 $upload.http()时，支持直接上传到 CouchDB，imgur 等等。支持 Angular http POST/PUT 请求的进度事件

　　轻量级，使用常规的 $http 来上传（支持非 HTML5 浏览器），所以提供所有 Angular $http 功能
<!DOCTYPE html><html ng-app="app"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>文件上传</title>
    <meta charset="utf-8"/>
    <script src="JS/angular.min.js"></script>
    <script src="JS/ng-file-upload.min.js"></script>
    <script src="JS/ng-file-upload-shim.min.js"></script>
    <script>
        var app = angular.module(&#39;app&#39;, [&#39;ngFileUpload&#39;]);
        app.controller(&#39;FileController&#39;, function ($scope, Upload) {
            $scope.uploadImg = &#39;&#39;;            //提交
            $scope.submit = function () {
                $scope.upload($scope.file);
            };
            $scope.upload = function (file) {
                $scope.fileInfo = file;
                Upload.upload({                    //服务端接收
                    url: &#39;Ashx/UploadFile.ashx&#39;,                    //上传的同时带的参数
                    data: {&#39;username&#39;: $scope.username},                    //上传的文件
                    file: file
                }).progress(function (evt) {
                    //进度条
                    var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                    console.log(&#39;progess:&#39; + progressPercentage + &#39;%&#39; + evt.config.file.name);
                }).success(function (data, status, headers, config) {
                    //上传成功
                    console.log(&#39;file &#39; + config.file.name + &#39;uploaded. Response: &#39; + data);
                    $scope.uploadImg = data;
                }).error(function (data, status, headers, config) {
                    //上传失败
                    console.log(&#39;error status: &#39; + status);
                });
            };
        });    </script></head><body>
    <form ng-controller="FileController">
        <img src="{{uploadImg}}"/>
        当前上传用户:<input type="text" placeholder="请输入您的名称" name="name" ng-model="username"/>
        <p class="button" ngf-select ng-model="file" name="file" ngf-pattern="&#39;image/*" accept="image/*" ngf-max-size="20MB" ngf-min-height="100">Select</p>
        <button type="submit" ng-click="submit()">submit</button>
        {{fileInfo.name}}<br/>
        {{fileInfo.size}}
    </form></body></html>

Dies ist die Front-End-Seite. Wenn das Back-End Java verwendet, können Sie Commons-Fileupload und andere Dateien zum Hochladen von Klassenbibliotheken verwenden.

Hinweis
Wenn das Backend ein Framework wie Struts verwendet, verarbeitet der Filter des Frameworks automatisch den hochgeladenen Dateiteil der http-Anfrage, was dazu führt, dass die angeforderten Dateidaten nicht im Servlet abgerufen werden.

Die erste Lösung besteht darin, die Struts-Konfigurationsdatei zu ändern und den Datei-Upload-Filter in einen von uns selbst geschriebenen leeren Filter zu ändern.

Die zweite Lösung besteht darin, ein Formular einzureichen, damit Struts das automatisch erhält hochgeladene Datei. Fügen Sie dem Servlet einfach ein Dateitypattribut und die get/set-Methode hinzu. Der Name des Attributs muss Datei sein! ! !

Das obige ist der detaillierte Inhalt vonVerwendung der AngularJS-Datei-Upload-Steuerung ng-file-upload. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Objektorientierte Implementierung einer einfachen Version des Super Mario-MinispielsNächster Artikel：Objektorientierte Implementierung einer einfachen Version des Super Mario-Minispiels

In Verbindung stehende Artikel

Mehr sehen