AngularJS 파일 업로드 제어 ng-file-upload 사용
- 一个新手원래의
- 2017-10-14 09:53:442237검색
인터넷에서 찾을 수 있는 두 가지 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('app', ['ngFileUpload']);
app.controller('FileController', function ($scope, Upload) {
$scope.uploadImg = ''; //提交
$scope.submit = function () {
$scope.upload($scope.file);
};
$scope.upload = function (file) {
$scope.fileInfo = file;
Upload.upload({ //服务端接收
url: 'Ashx/UploadFile.ashx', //上传的同时带的参数
data: {'username': $scope.username}, //上传的文件
file: file
}).progress(function (evt) {
//进度条
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progess:' + progressPercentage + '%' + evt.config.file.name);
}).success(function (data, status, headers, config) {
//上传成功
console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
$scope.uploadImg = data;
}).error(function (data, status, headers, config) {
//上传失败
console.log('error status: ' + 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="'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 중국어 웹사이트의 기타 관련 기사를 참조하세요!