首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >上传Angularjs前预览图片

上传Angularjs前预览图片
EN

Stack Overflow用户
提问于 2013-09-12 11:41:14
回答 2查看 81.2K关注 0票数 51

嗨,我想知道是否有一种方法可以在我使用angularjs上传图片之前预览它们?我正在使用这个库。https://github.com/danialfarid/angular-file-upload

谢谢。下面是我的代码:

template.html

代码语言:javascript
复制
 <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

代码语言:javascript
复制
  .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);
  }); 
}
}
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-10-01 14:35:52

这个东西的OdeToCode posted great service。因此,通过这个简单的指令,您可以轻松地预览甚至查看进度条:

代码语言:javascript
复制
.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

票数 53
EN

Stack Overflow用户

发布于 2017-01-15 18:58:53

代码语言:javascript
复制
  // start Picture Preview    
    $scope.imageUpload = function (event) {
        var files = event.target.files;

        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var reader = new FileReader();
            reader.onload = $scope.imageIsLoaded;
            reader.readAsDataURL(file);
        }
    }

    $scope.imageIsLoaded = function (e) {
        $scope.$apply(function () {
            $scope.img = e.target.result;            
        });
    }


<input type='file' ng-model-instant onchange="angular.element(this).scope().imageUpload(event)" />
<img class="thumb" ng-src="{{img}}" />
票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18754943

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档