上传Angularjs前preVIEW图片 [英] Preview Image before uploading Angularjs

问题描述

您好我想知道如果有一种方式来preVIEW将图像上传到使用angularjs之前，我？我现在用的这个库。 <一href="https://github.com/danialfarid/angular-file-upload">https://github.com/danialfarid/angular-file-upload

感谢。这是我的code：

template.html

 ＆LT; D​​IV NG控制器=picUploadCtr＆GT;
＆LT;形式GT;
        ＆LT;输入类型=文本NG-模式=myModelObj＆GT;
      ＆LT;输入类型=文件NG-文件选择=onFileSelect（$文件）＆GT;
 ＆LT;输入类型=文件NG-文件选择=onFileSelect（$文件）多＆GT;

 ＆LT; /形式GT;
     ＆LT; / DIV＆GT;
 

controller.js

  .controller（picUploadCtr'，函数（$范围，$ HTTP，$位置，userSettingsService）{

 $ scope.onFileSelect =功能（$文件）{
// $文件：文件中选出的阵列，每个文件具有的名称，大小和类型。
对于（VAR I = 0; I＆LT; $ files.length;我++）{
  变量$文件= $文件[I]
  $ http.uploadFile（{
    网址：服务器/上传/ URL，//upload.php脚本，Node.js的路线，或servlet uplaod URL）
    数据：{MyObj中：$ scope.myModelObj}，
    文件：$文件
  }），然后（功能（数据，状态，头，配置）{
    //文件被上传成功
    的console.log（数据）;
  }）;
}
}
 

解决方案

<一个href="http://odeto$c$c.com/blogs/scott/archive/2013/07/03/building-a-filereader-service-for-angularjs-the-service.aspx">OdeTo$c$c这个东西贴伟大的服务。所以用这个简单的指令，你可以很容易地preVIEW，甚至可以看到进度条：

  .directive（ngFileSelect，函数（）{
  返回 {
    链接：函数（$范围，EL）{
      el.bind（变，功能（五）{
        $ scope.file =（e.srcElement || e.target）.files [0];
        $ scope.getFile（）;
      }）;
    }
  }
 

这是工作在所有现代浏览器！

例： http://plnkr.co/edit/y5n16v?p=$p$pview

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

Thanks. Here is my code:

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 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!

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

这篇关于上传Angularjs前preVIEW图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！