1
Ich habe ein Problem auf meinem ionischen V1-Projekt mit einer Eingabedatei, ich versuche, eine Bildvorschau zu machen, um Mauskoordinaten vom Benutzer zu erhalten, bevor Sie es senden der Server. Wenn ich den Code im Browser unter Verwendung ionic serve laufen lasse, funktioniert alles gut, aber wenn ich es von einem Iphone 6-Gerät in Xcode-Simulator aus führe, zeigt es mir das Bild nicht an. Weiß jemand oder hatte dieses Problem?Ionic-V1 xcode Projekt zeige kein Bild von Eingang
hochgeladenes Bild von Web-Browser
hochgeladenes Bild von iphone
Mein Code sieht wie folgt aus Bild hochladen Controller:
var ctrl = angular.module('uploadImageController', []);
ctrl.controller('uploadImageController', ['$scope', '$http', '$state', function($scope, $http, $state) {
let $constructor =() => {
$scope.coordonate = {};
document.getElementById('imgPreview').onclick = function(e) {
$scope.coordonate.x = e.pageX - $(this).offset().left;
$scope.coordonate.y = e.pageY - $(this).offset().top;
document.getElementById('imgPreview').style = "display:none;";
}
document.getElementById('firstImage').onchange = function(evt) {
var tgt = evt.target || window.event.srcElement,
files = tgt.files;
if (FileReader && files && files.length) {
var fr = new FileReader();
fr.onload = function() {
document.getElementById('imgPreview').src = fr.result;
}
$scope.uploaded = 1;
fr.readAsDataURL(files[0]);
} else {
}
}
}
$scope.add = function() {
if ($scope.uploaded) {
if ($scope.coordonate.x && $scope.coordonate.x) {
alert($scope.coordonate.x)
var f = document.getElementById('secondImage').files[0],
r = new FileReader();
console.log(f);
var formData = new FormData();
formData.append('secondImage', f);
console.log("Add function");
var f = document.getElementById('firstImage').files[0],
r = new FileReader();
console.log(f);
formData.append('firstImage', f);
formData.append('coordonatex', $scope.coordonate.x.toFixed(0));
formData.append('coordonatey', $scope.coordonate.y.toFixed(0));
document.getElementById('loader').style = "display:block;";
document.getElementById('content').style = "display:none;";
$http({ method: 'POST', url: '/uploadImage', data: formData, headers: { 'Content-Type': undefined } }).then(function(response) {
setTimeout(function() {
document.getElementById('loader').style = "display:none;";
document.getElementById('content').style = "display:block;";
$state.go('result', { img: response.data });
}, 0);
})
} else {
alert('Choose a point');
}
} else {
alert('Choose an image');
}
}
$constructor();
}])
HTML-Vorlage für upload:
<!Doctype html>
<ion-view title="uploadImage">
<ion-content>
<div id="loader" class="loader"></div>
<div style="height: 90px"></div>
<div class="animate-bottom" id="content">
<div class="container-fuild" style="margin:auto; color:white;text-align:center;">
<title>Upload new File</title>
<div class="row">
<div class="col-xs-12">
<h1>Upload first image</h1></div>
</div>
<div class="row">
<div class="col-xs-12"><img src="" id="imgPreview" /></div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-5">
<input type="file" id="firstImage" name="file"/>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h1>Upload second image</h1></div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-5">
<input type="file" id="secondImage" name="secondImage" />
</div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-5">
<button type="button" class="btn btn-primary" ng-click="add()">Simulate</button>
</div>
</div>
</div>
</ion-content>
</ion-view>
Vielen Dank!