AngularJS 파일 업로드 제어 ng-file-upload 사용-JS 튜토리얼-php.cn

AngularJS 파일 업로드 제어 ng-file-upload 사용

一个新手

풀어 주다： 2017-10-14 09:53:44

원래의

2234명이 탐색했습니다.

인터넷에서 찾을 수 있는 두 가지 AngularJS 파일 업로드 컨트롤이 있습니다:

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

　이 둘은 매우 유사하며 js 파일의 구조도 동일합니다. 핵심 js는 .min.js이며, 업로드 진행률 표시줄 및 업로드 일시 중지와 같은 고급 기능을 지원하는 데 사용되는 -shim.min.js도 있습니다.

논리적으로는 shim.js를 추가해야 하나 말아야 하나, 실제 테스트에 따르면 shim.min.js를 포함해야 합니다. 그렇지 않으면 js 파일 로딩 문제가 발생합니다. 하지만angular-file-upload-shim.min.js 파일은 github에 존재하지 않습니다! ! !

　그래서 ng-file-upload를 사용하세요! ng-파일 업로드를 사용하세요! ng-파일 업로드를 사용하세요!

　angular-file-upload는 브라우저를 지원하지 않는 FileAPI 폴리필용으로 설계된 경량 AngularJS 파일 업로드 도구이며 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 요청의 업로드된 파일 부분을 자동으로 처리하므로 요청된 파일 데이터가 서블릿에서 얻어지지 않습니다.

첫 번째 해결 방법은 Struts 구성 파일을 변경하고 파일 업로드 필터를 직접 작성한 빈 필터로 변경하는 것입니다.

두 번째 해결 방법은 . 서블릿에 파일 유형 속성을 추가하고 get/set 메소드를 추가하기만 하면 됩니다. 속성 이름은 file이어야 합니다! ! !

위 내용은 AngularJS 파일 업로드 제어 ng-file-upload 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!