Of Stack

AngularJS File Upload Control ng file upload Detailed Explanation

  • 2021-07-10 18:45:13
  • OfStack

There are two file upload controls for AngularJS that can be found online:

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, and even the structure of js file is 1. The core js is. min. js, and there is also one-shim. min. js, which is used to support advanced functions such as upload progress bar and upload pause.

According to the principle, shim. js should be added or not, but the measured-shim. min. js must be included, otherwise there will be js file loading problem. 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, which is designed for FileAPI polyfill without browser support, and uses HTML5 to upload files directly.

Characteristic

Support upload progress, when upload, can cancel or abort, support file drag (HTML5), directory drag (weikit), CORS, PUT (html5)/POST method

Support cross-browser uploads using Flash polyfill FileAPI (HTML5 and non-HTML5). Allows clients to verify or modify files before uploading.

Direct uploads to CouchDB, imgur, and so on are supported when the content type of the file is $upload. http (). Support progress events for Angular http POST/PUT requests

Lightweight, upload using regular $http (supports non-HTML5 browsers), so provide all Angular $http functionality

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/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 = '';
   // Submit 
   $scope.submit = function () {
    $scope.upload($scope.file);
   };
   $scope.upload = function (file) {
    $scope.fileInfo = file;
    Upload.upload({
     // Server receiving 
     url: 'Ashx/UploadFile.ashx',
     // Parameters of uploaded simultaneous band 
     data: {'username': $scope.username},
     // Uploaded files 
     file: file
    }).progress(function (evt) {
     // Progress bar 
     var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
     console.log('progess:' + progressPercentage + '%' + evt.config.file.name);
    }).success(function (data, status, headers, config) {
     // Upload succeeded 
     console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
     $scope.uploadImg = data;
    }).error(function (data, status, headers, config) {
     // Upload failed 
     console.log('error status: ' + status);
    });
   };
  });
 </script>
</head>

<body>
 <form ng-controller="FileController">
  <img src="{{uploadImg}}"/>
   Current Upload 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>
  {{fileInfo.name}}<br/>
  {{fileInfo.size}}
 </form>
</body>

</html>

This is the front-end page, back-end if Java can use commons-fileupload file upload class library.

Attention

If the backend uses a framework such as Struts, the filter of the framework will automatically process the uploaded file part in the http request, resulting in the requested file data not being obtained in Servlet.

Solution 1 is to change the Struts configuration file and change the file upload filter to a blank filter written by ourselves

Solution 2 is like submit1 with < input type="file" > form form 1, so that Struts automatically get to the uploaded file. You only need to add one File type attribute to Servlet and add get/set methods. Attribute name 1 must be file! ! !

Related articles: