将图像显示在Angular的UI中后,将图像发送到服务器

我得到一个图片上传,或从一个Angular应用程序的相机:

<button type="button" onclick="userData.store()">send now</button><br> <input type="file" label="add photo" accept="image/*;capture=camera"> 

然后(现在)用这个Javascript处理它:

 var input = document.querySelector('input[type=file]'); var issuediv = document.getElementById('issue'); input.onchange = function () { var file = input.files[0]; displayAsImage(file); }; function displayAsImage(file) { var imgURL = URL.createObjectURL(file), img = document.createElement('img'); img.onload = function() { URL.revokeObjectURL(imgURL); }; img.src = imgURL; issuediv.appendChild(img); } 

两个问题:

  1. 这不是Angular代码,是通过JSON处理图像并准备(MySQL)数据库的Angular-ish方式?
  2. 上面显示Firefox和Chrome中的图像blob,但iOS和Android浏览器似乎不会附加img标签,只显示一个微小的缩略图。

你可以使用Daniel Afarid的Angular File Upload

调节器

 $scope.selectedFiles = []; $scope.dataUrls = []; $scope.model = 'test model'; $scope.onImageSelect = function($files) { $scope.selectedFiles['image'] = $files[0]; var $file = $files[0]; if (window.FileReader && $file.type.indexOf('image') > -1) { var fileReader = new FileReader(); fileReader.readAsDataURL($files[0]); fileReader.onload = function(e) { $timeout(function() { $scope.dataUrls['image'] = e.target.result; }); } } } $scope.save_image = function(){ $upload.upload({ data:$scope.model, url: 'the/url', file: $scope.selectedFiles['image'] }).then(//success and error callbacks); } 

视图

 <form enctype="multipart/form-data" class="form-horizontal"> <input type="file" ng-file-select="onImageSelect($files)"> <br /> <img ng-show="dataUrls['image']" ng-src="{{dataUrls['image']}}"> <button ng-click="save_image()"></button> </form>