AngularJS ファイルアップロード制御 ng-file-upload の使用法-jsチュートリアル-php.cn

AngularJS ファイルアップロード制御 ng-file-upload の使用法

一个新手

リリース： 2017-10-14 09:53:44

オリジナル

2203 人が閲覧しました

インターネット上には 2 つの AngularJS ファイルアップロードコントロールがあります:

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

これら2つは非常に似ており、jsファイルの構造も同じです。コア js は .min.js で、アップロードプログレスバーやアップロード一時停止などの高度な機能をサポートするために使用される -shim.min.js もあります。

論理的に言えば、shim.js を追加するかどうかですが、実際のテストによると、shim.min.js を含める必要があります。そうしないと、js ファイルの読み込みに問題が発生します。しかし、angular-file-upload-shim.min.js ファイルは github に存在しません。！！

だからng-file-uploadを使いましょう！ ng-file-upload を使用してください。 ng-file-upload を使用してください。

angular-file-upload は軽量の AngularJS ファイルアップロードツールで、ブラウザをサポートしていない FileAPI ポリフィル用に設計されており、HTML5 を使用してファイルを直接アップロードします。

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

ログイン後にコピー

これはフロントエンドのページです。バックエンドが Java を使用している場合は、commons-fileupload やその他のファイルアップロードクラスライブラリを使用できます。

注意事項
バックエンドがStrutsなどのフレームワークを使用している場合、httpリクエストのアップロードされたファイル部分がフレームワークのフィルタによって自動的に処理されてしまい、リクエストされたファイルのデータがサーブレットで取得されなくなります。

1 つ目の解決策は、Struts 構成ファイルを変更し、ファイルアップロードフィルターを自分で作成した空のフィルターに変更することです

2 つ目の解決策は、でフォームを送信するのと同じように、アップロードされたファイルを Struts に自動的に取得させることです。ファイルタイプ属性をサーブレットに追加し、get/set メソッドを追加するだけです。属性の名前は file である必要があります。！！

以上がAngularJS ファイルアップロード制御 ng-file-upload の使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。