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

前端之家收集整理的这篇文章主要介绍了ajax – 在上传Angularjs之前预览图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_403_0@ 您好,我想知道是否有一种方式预览图像之前我上传他们使用angularjs?我使用这个库。 https://github.com/danialfarid/angular-file-upload

谢谢。这里是我的代码

template.html

@H_403_5@<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

@H_403_5@.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这个东西。所以使用这个简单的指令,你可以轻松地预览,甚至看到进度条: @H_403_5@.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

猜你在找的Ajax相关文章