在上传 Angularjs 之前预览图片

Posted 2023-02-19

【中文标题】在上传 Angularjs 之前预览图片

【英文标题】：Preview Image before uploading Angularjs

【发布时间】：2013-09-16 06:56:57

【问题描述】：

您好，我想知道在使用 angularjs 上传图片之前是否可以预览图片？我正在使用这个库。 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);
  ); 

【参考方案1】：

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

.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

【讨论】：

只是一个旁注，这个（优秀的）基于文件阅读器api的解决方案，不支持ie9和ie的早期版本。

@saniko 是的。但感谢上帝，它的全球使用率仅为 2.99% (caniuse.com/#feat=filereader)

我更新了这个以使用 Angular 1.3 并稍微组织了代码plnkr.co/edit/JSuY2j?p=preview

@user1315599 诚邀您在这里给出更通用的答案，甚至提出更具体的问题！

@osiris355 ，试试上面的 Michael J. Calkins 解决方案

【参考方案2】：

JavaScript

 $scope.setFile = function(element) 
  $scope.currentFile = element.files[0];
   var reader = new FileReader();

  reader.onload = function(event) 
    $scope.image_source = event.target.result
    $scope.$apply()

  
  // when the file is read it triggers the onload event above.
  reader.readAsDataURL(element.files[0]);

HTML

<img ng-src="image_source">
<input type="file" id="trigger" class="ng-hide" onchange="angular.element(this).scope().setFile(this)" accept="image/*">

这对我有用。

【讨论】：

为什么这比上一个答案更好？

看来这个解决方案不需要使用github.com/ghostbar/angular-file-model

这里有一个解释，为什么这个解决方案不是一个好主意：***.com/questions/17922557/…

【参考方案3】：

查看Jasney extension of Bootstrap v3中的图片上传小部件

【讨论】：

我实际上正在寻找 Jasney 扩展的替代方案，因为您无法控制预览和按钮的元素。我希望我的预览显示在上传按钮之外，但它们都包含在同一个容器中。话虽这么说，这对大多数人来说是一个可行的选择，因此我会支持你的答案。

【参考方案4】：

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

【讨论】：

太棒了！如果我想获取图像名称和扩展名，我该怎么办？