在角显示它在用户界面后，发送图像到服务器 [英] Sending an image to the server after displaying it in the UI in Angular

问题描述

我发现了一个图片上传，或从相机的角度应用：

 ＆LT;按钮式=按钮的onclick =userData.store（）＆GT;派现＆LT; /按钮＆GT;＆LT; BR＆GT;
＆LT;输入类型=文件标签=添加照片接受=图像/ *;捕捉=相机＆GT;
 

然后（现在）处理它与这个JavaScript：

 变种输入= document.querySelector（'输入[type = file]'）;
VAR issuediv =的document.getElementById（'问题'）;

input.onchange =功能（）{
  var文件= input.files [0];
  displayAsImage（文件）;
};

功能displayAsImage（文件）{
  VAR imgUrl的= URL.createObjectURL（文件），
  IMG = document.createElement方法（'IMG'）;
  img.onload =功能（）{
    URL.revokeObjectURL（imgUrl的）;
  };
  img.src = imgUrl的;
  issuediv.appendChild（IMG）;
}
 

两个问题：

1. 这是没有棱角code-是将处理的图像和$ P $通过JSON pparing它的（MySQL的）数据库中的一个角度上下的方法是什么？
2. 上面显示的Firefox和Chrome，但iOS和Android浏览器的图像斑点似乎没有追加 IMG 标记，并只显示一个很小的缩略图。

解决方案

您可以使用丹尼尔Afarid的角文件上传

控制器

  $ scope.selectedFiles = [];
$ scope.dataUrls = [];
$ scope.model ='试验模式;

$ scope.onImageSelect =功能（$文件）{

    $ scope.selectedFiles [形象] = $文件[0];


    变量$文件= $文件[0];
    如果（window.FileReader＆安培;＆安培; $ file.type.indexOf（图像）GT; -1）{
        VAR的FileReader =新的FileReader（）;
        fileReader.readAsDataURL（$文件[0]）;

        fileReader.onload =功能（E）{
        $超时（函数（）{
        $ scope.dataUrls ['形象'] = e.target.result;
            }）;
        }
    }

}

$ scope.save_image =功能（）{

        $ upload.upload（{
                  数据：$ scope.model，
                  网址：该/ URL，
                  文件：$ scope.selectedFiles [形象]

        }），然后（//成功和错误回调）。


    }
 

查看

 ＆LT;表单的enctype =的multipart / form-data的阶级=形横＆GT;
    ＆LT;输入类型=文件NG-文件选择=onImageSelect（$文件）＆GT;
    ＆LT; BR /＆GT;
    ＆LT; IMG NG秀=dataUrls [形象]NG-SRC ={{dataUrls [形象]}}＆GT;
    ＆LT;按钮NG点击=save_image（）＆GT;＆LT; /按钮＆GT;
＆LT; /形式GT;
 

I'm getting an image upload, or from the camera in an Angular app:

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

Then (for now) handling it with this 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);
}

Two issues:

1. This isn't Angular code—is what would be an Angular-ish way of handling the image and preparing it for the (MySQL) database via JSON?
2. The above displays the image blob in Firefox and Chrome, but iOS and Android browsers don't appear to append the img tag and display only a tiny thumbnail.

解决方案

You could use Daniel Afarid's Angular File Upload

Controller

$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);


    }

View

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

这篇关于在角显示它在用户界面后，发送图像到服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！