在 AngularJS 中上传图片
Upload Image in AngularJS
我的代码遇到问题,我有一个包含照片上传器的员工信息更新页面,我的问题是当有人上传一张大照片时,比方说 3mb 什么都没有等待上传完成和个人资料图片坏了。这是我的代码,html 方:
<md-input-container flex>
<fieldset>
<div>
<img data-ng-src="{{imageURL}}" alt="{{user.displayName}}"
class="user-profile-picture">
</div>
<div data-ng-hide="uploader.queue.length">
<input aria-label="Upload" type="file" nv-file-select uploader="uploader" data-ng-model="contacto.profileImageURL" multiple>
</div>
<div class="md-actions" layout="row" layout-align="end center"
data-ng-show="uploader.queue.length">
<md-button data-ng-click="cancelUpload();">Cancelar</md-button>
<!-- <md-button class="md-primary" data-ng-click="uploadProfilePicture();">Ok</md-button> -->
</div>
</fieldset>
</md-input-container>
控制器:
// Create file uploader instance
$scope.uploader = new FileUploader({
url: 'api/users/picture'
});
// Set file uploader image filter
$scope.uploader.filters.push({
name: 'imageFilter',
fn: function (item) {
var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
}
});
// Called after the user selected a new picture file
$scope.uploader.onAfterAddingFile = function (fileItem) {
if ($window.FileReader) {
var fileReader = new FileReader();
fileReader.onload = function (fileReaderEvent) {
$timeout(function () {
$scope.imageURL = fileReaderEvent.target.result;
}, 0);
};
fileReader.readAsDataURL(fileItem._file);
console.log('donde');
}
};
// Called after the user has successfully uploaded a new picture
$scope.uploader.onSuccessItem = function () {
console.log('salio?');
// Show success message
$scope.success = true;
// Clear upload buttons
$scope.cancelUpload();
};
// Called after the user has failed to uploaded a new picture
$scope.uploader.onErrorItem = function (fileItem, response) {
// Clear upload buttons
$scope.cancelUpload();
// Show error message
$scope.error = response.message;
};
// Change user profile picture
$scope.uploadProfilePicture = function () {
// Clear messages
console.log('image upload fired!');
$scope.success = $scope.error = null;
// Start upload
$scope.uploader.uploadAll();
};
// Cancel the upload process
$scope.cancelUpload = function () {
$scope.uploader.clearQueue();
$scope.imageURL = $scope.contacto.profileImageURL;
};
我找不到客户端等待上传完成的方法。
所以我猜这之后有一个提交按钮,用户可以在其中提交信息,如果是这样,请在其上使用 ng-disabled
<button ng-disabled="uploadwait" ng-click="submit()">Submit</button>
然后在控制器中
$scope.uploadwait=false;//intially nothing is getting uploaded
$scope.uploader.onAfterAddingFile = function (fileItem) {
$scope.uploadwait=true;//user starts waiting
if ($window.FileReader) {
var fileReader = new FileReader();
fileReader.onload = function (fileReaderEvent) {
$timeout(function () {
$scope.imageURL = fileReaderEvent.target.result;
}, 0);
};
fileReader.readAsDataURL(fileItem._file);
console.log('donde');
}
};
// Called after the user has successfully uploaded a new picture
$scope.uploader.onSuccessItem = function () {
$scope.uploadwait=false;//upload finished
console.log('salio?');
// Show success message
$scope.success = true;
// Clear upload buttons
$scope.cancelUpload();
};
我的代码遇到问题,我有一个包含照片上传器的员工信息更新页面,我的问题是当有人上传一张大照片时,比方说 3mb 什么都没有等待上传完成和个人资料图片坏了。这是我的代码,html 方:
<md-input-container flex>
<fieldset>
<div>
<img data-ng-src="{{imageURL}}" alt="{{user.displayName}}"
class="user-profile-picture">
</div>
<div data-ng-hide="uploader.queue.length">
<input aria-label="Upload" type="file" nv-file-select uploader="uploader" data-ng-model="contacto.profileImageURL" multiple>
</div>
<div class="md-actions" layout="row" layout-align="end center"
data-ng-show="uploader.queue.length">
<md-button data-ng-click="cancelUpload();">Cancelar</md-button>
<!-- <md-button class="md-primary" data-ng-click="uploadProfilePicture();">Ok</md-button> -->
</div>
</fieldset>
</md-input-container>
控制器:
// Create file uploader instance
$scope.uploader = new FileUploader({
url: 'api/users/picture'
});
// Set file uploader image filter
$scope.uploader.filters.push({
name: 'imageFilter',
fn: function (item) {
var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
}
});
// Called after the user selected a new picture file
$scope.uploader.onAfterAddingFile = function (fileItem) {
if ($window.FileReader) {
var fileReader = new FileReader();
fileReader.onload = function (fileReaderEvent) {
$timeout(function () {
$scope.imageURL = fileReaderEvent.target.result;
}, 0);
};
fileReader.readAsDataURL(fileItem._file);
console.log('donde');
}
};
// Called after the user has successfully uploaded a new picture
$scope.uploader.onSuccessItem = function () {
console.log('salio?');
// Show success message
$scope.success = true;
// Clear upload buttons
$scope.cancelUpload();
};
// Called after the user has failed to uploaded a new picture
$scope.uploader.onErrorItem = function (fileItem, response) {
// Clear upload buttons
$scope.cancelUpload();
// Show error message
$scope.error = response.message;
};
// Change user profile picture
$scope.uploadProfilePicture = function () {
// Clear messages
console.log('image upload fired!');
$scope.success = $scope.error = null;
// Start upload
$scope.uploader.uploadAll();
};
// Cancel the upload process
$scope.cancelUpload = function () {
$scope.uploader.clearQueue();
$scope.imageURL = $scope.contacto.profileImageURL;
};
我找不到客户端等待上传完成的方法。
所以我猜这之后有一个提交按钮,用户可以在其中提交信息,如果是这样,请在其上使用 ng-disabled
<button ng-disabled="uploadwait" ng-click="submit()">Submit</button>
然后在控制器中
$scope.uploadwait=false;//intially nothing is getting uploaded
$scope.uploader.onAfterAddingFile = function (fileItem) {
$scope.uploadwait=true;//user starts waiting
if ($window.FileReader) {
var fileReader = new FileReader();
fileReader.onload = function (fileReaderEvent) {
$timeout(function () {
$scope.imageURL = fileReaderEvent.target.result;
}, 0);
};
fileReader.readAsDataURL(fileItem._file);
console.log('donde');
}
};
// Called after the user has successfully uploaded a new picture
$scope.uploader.onSuccessItem = function () {
$scope.uploadwait=false;//upload finished
console.log('salio?');
// Show success message
$scope.success = true;
// Clear upload buttons
$scope.cancelUpload();
};