我想在离子框架中上传之前预览图像，我已尝试使用预览进行角度文件上传，它在浏览器中运行良好，但没有使用移动设备。这是我的代码。
controller.js
$scope.fileReaderSupported = window.FileReader != null && (window.FileAPI == null || FileAPI.html5 != false);
$scope.generateThumb = function (files) {
var file = files[0];
if (file != null) {
if ($scope.fileReaderSupported && file.type.indexOf('image') > -1) {
$timeout(function () {
var fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = function (e) {
$timeout(function () {
file.dataUrl = e.target.result;
return false;
});
}
});
}
}
}
function uploadUsing$upload(file, user) {
$scope.vPassword = user.vPassword;
$ionicLoading.show({
template: spinner_android
});
$http.post(base_url + 'signup.php', {user: user}).
success(function (data, status, headers, config) {
if (data.message == 'success') {
if (file != null || file != undefined) {
file.upload = $upload.upload({
url: base_url + 'upload.php',
method: 'POST',
fields: {iUserID: $scope.iUserID},
file: file,
fileFormDataName: 'vImage',
});
file.upload.then(function (response) {
$timeout(function () {
file.result = response.data;
});
}, function (response) {
if (response.status > 0)
$scope.errorMsg = response.status + ': ' + response.data;
});
$ionicLoading.hide();
$scope.reg = {};
$scope.showSuccessPopup(data.data.iUserID);
//$state.go('login');
} else {
$ionicLoading.hide();
$scope.errorMsg = 'Email already exist';
}
}).
error(function (data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
}
})
signup.html
<form on-valid-submit="postForm(files, reg)" name="registrationForm" novalidate >
<div class="signup-img" ng-file-select ng-model="files" id="files" ng-change="generateThumb(files)">
<img ng-hide="files.length > 0" src="./img/profile-image.png" width="110" height="107" class="title-image">
<div ng-show="files.length > 0" class="response">
<div class="sel-file" ng-repeat="f in files">
<div class="thumbImgDiv signup-img">
<div class="myCancelBtn" ng-click="cancelImage()" ><i class="icon-close fa-fw" style=""></i></div>
<img ng-show="f.dataUrl" ng-src="{{f.dataUrl}}" width="110" height="107" class="title-image profile-image">
</div>
</div>
</div>
</div>
<div class="fajr-list text-center padding" style="color:red">{{errorMsg}}</div>
<div class="list fajr-list sign-up">
<!--(registrationForm.vFirst.$dirty || submitted) && registrationForm.vFirst.$error.required-->
<div class="form-errors" ng-show="registrationForm.$submitted || registrationForm.vFirst.$touched" >
<div ng-show="registrationForm.vFirst.$error.required" class="form-error">Required.</div>
</div>
<label class="item item-input" ng-class="{ 'has-error' : registrationForm.vFirst.$invalid && registrationForm.$submitted,'valid' : registrationForm.vFirst.$valid && registrationForm.$submitted}">
<i class="icon ion-person"></i>
<input type="text" placeholder="First Name" class="text" name="vFirst" ng-model="reg.vFirst" required ng-focus="showKeyboard()" ng-blur="hideKeyboard()">
<!--<i class="icon ion-alert-circled error"></i>-->
</label>
<div class="form-errors" ng-show="registrationForm.$submitted || registrationForm.vLast.$touched" >
<div ng-show="registrationForm.vLast.$error.required" class="form-error">Required.</div>
</div>
<label class="item item-input" ng-class="{ 'has-error' : registrationForm.vLast.$invalid && registrationForm.$submitted,'valid' : registrationForm.vLast.$valid && registrationForm.$submitted}">
<i class="icon ion-person"></i>
<input type="text" placeholder="Last Name" class="text" name="vLast" ng-model="reg.vLast" required="" ng-focus="showKeyboard()" ng-blur="hideKeyboard()">
<!--<i class="icon ion-alert-circled error"></i>-->
</label>
<!--<div class="clear"></div>-->
<div class="form-errors" ng-show="registrationForm.$submitted || registrationForm.vEmail.$touched">
<span ng-show="registrationForm.vEmail.$error.required" class="form-error">Required.</span>
<span ng-show="registrationForm.vEmail.$error.email" class="form-error">This is not a valid email.</span>
</div>
<label class="item item-input" ng-class="{ 'has-error' : registrationForm.vEmail.$invalid && registrationForm.$submitted,'valid' : registrationForm.vEmail.$valid && registrationForm.$submitted}">
<i class="icon ion-email"></i>
<input type="email" placeholder="E-mail" class="email" name="vEmail" ng-model="reg.vEmail" required="" ng-focus="showKeyboard()" ng-blur="hideKeyboard()">
<!--<i class="icon ion-alert-circled error"></i>-->
</label>
<div class="form-errors" ng-show="registrationForm.$submitted || registrationForm.vPassword.$touched">
<span ng-show="registrationForm.vPassword.$error.required" class="form-error">Required.</span>
</div>
<label class="item item-input" ng-class="{ 'has-error' : registrationForm.vPassword.$invalid && registrationForm.$submitted,'valid' : registrationForm.vPassword.$valid && registrationForm.$submitted}">
<i class="icon ion-locked"></i>
<input type="password" placeholder="Password" class="pass" name="vPassword" ng-model="reg.vPassword" required="" ng-focus="showKeyboard()" ng-blur="hideKeyboard()">
<!--<i class="icon ion-alert-circled error"></i>-->
</label>
<div class="form-errors" ng-show="registrationForm.$submitted || registrationForm.vConfirmPassword.$touched">
<span ng-show="registrationForm.vConfirmPassword.$error" class="form-error">{{registrationForm.vConfirmPassword.$error.required ? 'Required' : registrationForm.vConfirmPassword.$error.match ? 'Must match the password' : '' }}</span>
</div>
<label class="item item-input" ng-class="{ 'has-error' : registrationForm.vConfirmPassword.$error && registrationForm.vConfirmPassword.$invalid && registrationForm.$submitted,'valid' : registrationForm.vConfirmPassword.$valid && registrationForm.$submitted }">
<i class="icon ion-locked"></i>
<input type="password" placeholder="Confirm Password" class="pass" name="vConfirmPassword" match="reg.vPassword" ng-model="reg.vConfirmPassword" required ng-focus="showKeyboard()" ng-blur="hideKeyboard()" >
<!--<i class="icon ion-alert-circled error"></i>-->
</label>
<label class="item item-input">
<i class="icon ion-calendar"></i>
<input type="date" placeholder="Date of Birth" class="text" ng-model="reg.vDob" name="vDob" >
</label>
<div class="form-errors" ng-show="registrationForm.$submitted || registrationForm.eGender.$touched">
<span ng-show="registrationForm.eGender.$error.required" class="form-error">Please select gender.</span>
</div>
<label class="item item-input item-select item-select-select " ng-class="{ 'has-error' : registrationForm.eGender.$invalid && registrationForm.$submitted,'valid' : registrationForm.eGender.$valid && registrationForm.$submitted}">
<i class="icon ion-woman"></i>
<select ng-model="reg.eGender" required name="eGender">
<option value="" selected>Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<!--<i class="icon ion-alert-circled error"></i>-->
</label>
<div class="clear"></div>
<label class="item item-input">
<i class="icon ion-ios-telephone"></i>
<input type="text" placeholder="Phone Number" class="text" name="vPhone" ng-model="reg.vPhone" ng-focus="showKeyboard()" ng-blur="hideKeyboard()">
</label>
<label class="item item-input">
<i class="icon ion-location"></i>
<input type="text" placeholder="Address" class="text" name="vtAddress" ng-model="reg.tAddress" ng-focus="showKeyboard()" ng-blur="hideKeyboard()">
</label>
<div class="form-errors" ng-show="registrationForm.$submitted || registrationForm.vCountry.$touched">
<span ng-show="registrationForm.vCountry.$error.required" class="form-error">Please select country.</span>
</div>
<!-- <label class="item item-input gender-block item-select item-select-select " ng-class="{ 'has-error' : registrationForm.vCountry.$invalid && registrationForm.$submitted,'valid' : registrationForm.vCountry.$valid && registrationForm.$submitted}">
<i class="icon ion-earth"></i>
<country-select data-ng-model="vCountry" required name="vCountry" ng-class="{ 'has-error' : registrationForm.vCountry.$invalid && registrationForm.$submitted,'valid' : registrationForm.vCountry.$valid && registrationForm.$submitted}"></country-select>
</label>-->
<label class="item item-input gender-block item-select item-select-select " ng-class="{ 'has-error' : registrationForm.vCountry.$invalid && registrationForm.$submitted,'valid' : registrationForm.vCountry.$valid && registrationForm.$submitted}">
<i class="icon ion-earth"></i>
<select ng-model="reg.vCountry" required name="vCountry" data-ng-change="getCities(reg.vCountry)" class="select-item-item">
<option value="" selected>Country</option>
<option ng-repeat="country in countries"
value="{{country.Code}}">
{{country.Name}}
</option>
<!-- <option value="India">India</option>
<option value="Pakistan">Pakistan</option>-->
</select>
</label>
<div class="form-errors" ng-show="registrationForm.$submitted || registrationForm.vCity.$touched">
<span ng-show="registrationForm.vCity.$error.required" class="form-error">Please select city.</span>
</div>
<label class="item item-input gender-block item-select item-select-select " ng-class="{ 'has-error' : registrationForm.vCity.$invalid && registrationForm.$submitted,'valid' : registrationForm.vCity.$valid && registrationForm.$submitted}">
<i class="icon ion-map"></i>
<select ng-model="reg.vCity" required name="vCity" class="select-item-item" >
<option value="" selected>City</option>
<option ng-repeat="city in cities"
value="{{city.Name}}">
{{city.Name}}
</option>
<!-- <option value="Ahmedabad">Ahmedabad</option>
<option value="Baroda">Baroda</option>
<option value="Jamnagar">Jamnagar</option>
<option value="Rajkot">Rajkot</option>-->
</select>
<!--<i class="icon ion-alert-circled error"></i>-->
</label>
</div>
<button type="submit" id="submitForm" style="display: none"></button>
</form>
我已经搜索了文件上传以及ionic / cordova的预览但我没有得到我的问题的答案。如果教程或示例有任何良好的链接，请告诉我。
修改
我发现它只适用于html5设备。我没有预览哪些设备不支持html5。