angular 上传图片并显示_angularjs图片上传和预览 - ng-file-upload

ajax上传文件

安装

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

bower install ng-file-upload --save

使用实例

Upload on file select

accept="image/*" ngf-max-height="1000" ngf-max-size="1MB">

Select File

File:

{{f.name}} {{errFile.name}} {{errFile.$error}} {{errFile.$errorParam}}

ng-bind="f.progress + '%'">

{{errorMsg}}

//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;

}