嗨,我想知道在使用angularjs上传图像之前是否可以预览图像?我正在使用这个图书馆。https://github.com/danialfarid/angular- file-upload
谢谢。这是我的代码:
template.html
<div ng-controller="picUploadCtr"> <form> <input type="text" ng-model="myModelObj"> <input type="file" ng-file-select="onFileSelect($files)" > <input type="file" ng-file-select="onFileSelect($files)" multiple> </form> </div>
controller.js
.controller('picUploadCtr', function($scope, $http,$location, userSettingsService) { $scope.onFileSelect = function($files) { //$files: an array of files selected, each file has name, size, and type. for (var i = 0; i < $files.length; i++) { var $file = $files[i]; $http.uploadFile({ url: 'server/upload/url', //upload.php script, node.js route, or servlet uplaod url) data: {myObj: $scope.myModelObj}, file: $file }).then(function(data, status, headers, config) { // file is uploaded successfully console.log(data); }); } }
OdeToCode为这个东西发布了很棒的服务。因此,通过此简单的指令,您可以轻松预览甚至查看进度栏:
.directive("ngFileSelect",function(){ return { link: function($scope,el){ el.bind("change", function(e){ $scope.file = (e.srcElement || e.target).files[0]; $scope.getFile(); }); } }
它适用于所有现代浏览器!
示例:http://plnkr.co/edit/y5n16v?p = preview