Maison > Article > interface Web > Utilisation du contrôle de téléchargement de fichiers AngularJS ng-file-upload

Utilisation du contrôle de téléchargement de fichiers AngularJS ng-file-upload

一个新手original: 2017-10-14 09:53:442179parcourir

Il existe deux contrôles de téléchargement de fichiers AngularJS disponibles sur Internet :

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

Ces deux-là sont très similaires, même la structure du fichier js est la même. Le noyau js est .min.js, et il existe également -shim.min.js, qui est utilisé pour prendre en charge des fonctions avancées telles que la barre de progression du téléchargement et la pause du téléchargement.

Logiquement parlant, shim.js devrait être ajouté ou non, mais selon les tests réels, shim.min.js doit être inclus, sinon il y aura des problèmes de chargement de fichier js. Mais le fichier angulaire-file-upload-shim.min.js n'existe pas sur github ! ! !

Alors utilisez ng-file-upload ! Utilisez ng-file-upload ! Utilisez ng-file-upload !

Angular-file-upload est un outil léger de téléchargement de fichiers AngularJS, conçu pour le polyfill FileAPI qui ne prend pas en charge les navigateurs et utilise HTML5 pour télécharger directement des fichiers.
　

特性
　　支持上传进度，在上传的时候，可以取消或者中止，支持文件拖拽（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>

Ceci est la page front-end Si le back-end utilise Java, vous pouvez utiliser commons-fileupload et d'autres fichiers pour télécharger des bibliothèques de classes.

Remarque
Si le backend utilise un framework tel que Struts, le filtre du framework traitera automatiquement la partie du fichier téléchargé de la requête http, ce qui entraînera que les données du fichier demandées ne soient pas obtenues dans le servlet.

La première solution consiste à modifier le fichier de configuration de Struts et à remplacer le filtre de téléchargement de fichiers par un filtre vide écrit par nous-mêmes.

La deuxième solution consiste à soumettre un formulaire avec, Laissez Struts obtenir automatiquement le fichier téléchargé. Ajoutez simplement un attribut de type de fichier au servlet et ajoutez la méthode get/set. Le nom de l'attribut doit être file! ! !

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Implémentation orientée objet d'une version simple du mini-jeu Super MarioArticle suivant：Implémentation orientée objet d'une version simple du mini-jeu Super Mario

Articles Liés

Voir plus