Home > Article > Web Front-end > Usage of AngularJS file upload control ng-file-upload
There are two AngularJS file upload controls that can be found on the Internet:
Angular-file-upload: https://github.com/nervgh/angular-file-upload
ng -file-upload: https://github.com/danialfarid/ng-file-upload
These two are very similar, even the structure of the js file is the same. The core js is .min.js, and there is also -shim.min.js, which is used to support advanced functions such as upload progress bar and upload pause.
Logically speaking, shim.js should be added or not, but according to actual testing, shim.min.js must be included, otherwise there will be js file loading problems. But the file angular-file-upload-shim.min.js does not exist on github! ! !
So use ng-file-upload! Use ng-file-upload! Use ng-file-upload!
Angular-file-upload is a lightweight AngularJS file upload tool, designed for FileAPI polyfill that does not support browsers, and uses HTML5 to directly upload files.
特性 支持上传进度，在上传的时候，可以取消或者中止，支持文件拖拽（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>This is the front-end page. If the back-end uses Java, you can use commons-fileupload and other files to upload class libraries.
Note
If the backend uses a framework such as Struts, the filter of the framework will automatically process the uploaded file part of the http request, resulting in the requested file data not being obtained in the Servlet.
The first solution is to change the Struts configuration file and change the file upload filter to a blank filter written by ourselves
The second solution is to submit a form with a form, Let Struts automatically obtain the uploaded file. Just add a File type attribute to the Servlet and add the get/set method. The name of the attribute must be file! ! !
The above is the detailed content of Usage of AngularJS file upload control ng-file-upload. For more information, please follow other related articles on the PHP Chinese website!