在上传 Angularjs 之前预览图片-前端问题

Preview Image before uploading Angularjs(在上传 Angularjs 之前预览图片)

本文介绍了在上传 Angularjs 之前预览图片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

您好，我想知道在使用 angularjs 上传图片之前是否可以预览图片?我正在使用这个库.https://github.com/danialfarid/angular-file-upload

Hi I was wondering if there was a way to preview images before I upload them using angularjs? I am using the this library. https://github.com/danialfarid/angular-file-upload

谢谢.这是我的代码:

模板.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 为这些东西发布了很棒的服务.因此，通过这个简单的指令，您可以轻松预览甚至查看进度条:

OdeToCode posted great service for this stuff. So with this simple directive you can easily preview and even see the progress bar:

.directive("ngFileSelect",function(){    
  return {
    link: function($scope,el){          
      el.bind("change", function(e){          
        $scope.file = (e.srcElement || e.target).files[0];
        $scope.getFile();
      });          
    }        
  }

它适用于所有现代浏览器！

It is working in all modern browsers!

示例:http://plnkr.co/edit/y5n16v?p=preview

这篇关于在上传 Angularjs 之前预览图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！