There are two AngularJS file upload controls that can be found online:
angular-file-upload：/nervgh/angular-file-upload
ng-file-upload：/danialfarid/ng-file-upload
These two are very similar, and even the structure of the js file is the same. The core js is., and there is also a - to support advanced functions such as uploading progress bar and uploading pause.
In theory, it should be added or not, but the actual test must be included, otherwise there will be problems with js file loading. But this file 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. It uses HTML5 to upload files directly.
Features
Support upload progress. When uploading, it can be cancelled or aborted. Support file drag (HTML5), directory drag (weikit), CORS, PUT (html5)/POST methods
Supports cross-browser uploads (HTML5 and non-HTML5) using Flash polyfill FileAPI. Allows the client to verify or modify files before uploading.
When the content type of a file uses $(), it supports direct upload to CouchDB, imgur, etc. Supports progress events for Angular http POST/PUT requests
Lightweight, using regular $http for upload (supporting non-HTML5 browsers), so all Angular $http features are provided
example
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>File upload</title>
<meta charset="utf-8"/>
<script src="JS/"></script>
<script src="JS/"></script>
<script src="JS/"></script>
<script>
var app = ('app', ['ngFileUpload']);
('FileController', function ($scope, Upload) {
$ = '';
//submit $ = function () {
$($);
};
$ = function (file) {
$ = file;
({
//Server receiving url: 'Ashx/',
//Arguments with upload data: {'username': $},
//Uploaded file file: file
}).progress(function (evt) {
//Progress bar var progressPercentage = parseInt(100.0 * / );
('progess:' + progressPercentage + '%' + );
}).success(function (data, status, headers, config) {
//Upload successfully ('file ' + + 'uploaded. Response: ' + data);
$ = data;
}).error(function (data, status, headers, config) {
//Upload failed ('error status: ' + status);
});
};
});
</script>
</head>
<body>
<form ng-controller="FileController">
<img src="{{uploadImg}}"/>
Current uploaded user:<input type="text" placeholder="Please enter your name" name="name" ng-model="username"/>
<div class="button" ngf-select ng-model="file" name="file" ngf-pattern="'image/*" accept="image/*" ngf-max-size="20MB" ngf-min-height="100">Select</div>
<button type="submit" ng-click="submit()">submit</button>
{{}}<br/>
{{}}
</form>
</body>
</html>
This is the front-end page. If the back-end uses Java, you can upload the class library using commons-fileupload and other files.
Notice
If the backend uses frameworks such as Struts, the framework's filter will automatically process the uploaded file part in the http request, resulting in the requested file data not being obtained in the Servlet.
The solution is to change the Struts configuration file and change the file upload filter to a blank filter we wrote ourselves
The second solution is to let Struts automatically get the uploaded file like submit a form form with <input type="file">. Just add a File type attribute in the servlet and add a get/set method. The name of the attribute must be file! ! !
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.