angularjs图片上传和预览 - ng-file-upload

ng-file-upload

ajax上传文件

官方demo地址

安装

bower install ng-file-upload-shim --save(for non html5 suppport)
bower install ng-file-upload --save

使用实例

<script src="angular(.min).js"></script>
<script src="ng-file-upload-shim(.min).js"></script> <!-- for no html5 browsers support -->
<script src="ng-file-upload(.min).js"></script>

<body ng-app="fileUpload" ng-controller="MyCtrl">
  <h4>Upload on file select</h4>
  <button type="file" ngf-select="uploadFiles($file, $invalidFiles)"
          accept="image/*" ngf-max-height="1000" ngf-max-size="1MB">
      Select File</button>
  <br><br>
  File:
  <div style="font:smaller">{{f.name}} {{errFile.name}} {{errFile.$error}} {{errFile.$errorParam}}
      <span class="progress" ng-show="f.progress >= 0">
          <div style="width:{{f.progress}}%"  
               ng-bind="f.progress + '%'"></div>
      </span>
  </div>     
  {{errorMsg}}
</body>

//inject angular file upload directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);

app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
    $scope.uploadFiles = function(file, errFiles) {
        $scope.f = file;
        $scope.errFile = errFiles && errFiles[0];
        if (file) {
            file.upload = Upload.upload({
                url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
                data: {file: file}
            });

            file.upload.then(function (response) {
                $timeout(function () {
                    file.result = response.data;
                });
            }, function (response) {
                if (response.status > 0)
                    $scope.errorMsg = response.status + ': ' + response.data;
            }, function (evt) {
                file.progress = Math.min(100, parseInt(100.0 * 
                                         evt.loaded / evt.total));
            });
        }   
    }
}]);

.thumb {
    width: 24px;
    height: 24px;
    float: none;
    position: relative;
    top: 7px;
}

form .progress {
    line-height: 15px;
}

.progress {
    display: inline-block;
    width: 100px;
    border: 3px groove #CCC;
}

.progress div {
    font-size: smaller;
    background: orange;
    width: 0;
}

posted @ 2017-09-17 15:36  CooMark  阅读(972)  评论(0)  编辑  收藏  举报