ajax – 在上传Angularjs之前预览图像

发布时间：2020-12-16 03:21:05 所属栏目：百科来源：网络整理

导读：您好，我想知道是否有一种方式预览图像之前我上传他们使用angularjs？我使用这个库。 https://github.com/danialfarid/angular-file-upload 谢谢。这里是我的代码： template.html div ng-controller="picUploadCtr"form input type="text" ng-model="myMode

您好，我想知道是否有一种方式预览图像之前我上传他们使用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 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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!