这是我的HTML代码:
<input type="file" nv-file-select="" options="{ photoType: 'studentPic' }" uploader="uploader" />
这是角度代码:
var uploader = $scope.uploader = new FileUploader({
url: 'badges/photos',
autoUpload: true
});
// FILTERS
uploader.filters.push({
name: 'customFilter',
fn: function (item /*{File|FileLikeObject}*/ , options) {
return this.queue.length < 10;
}
});
// CALLBACKS
uploader.onWhenAddingFileFailed = function (item /*{File|FileLikeObject}*/ , filter, options) {
console.info('onWhenAddingFileFailed', item, filter, options);
};
uploader.onAfterAddingFile = function (fileItem) {
console.info('onAfterAddingFile', fileItem);
};
uploader.onAfterAddingAll = function (addedFileItems) {
console.info('onAfterAddingAll', addedFileItems);
};
uploader.onBeforeUploadItem = function (item) {
console.log("item before uploading:",item._file.type);
console.log("item before uploading:",item._file.size);
if((item._file.type!="image/png" && item._file.type!="image/jpeg") || item._file.size>102400){
console.log("in if of before");
this.cancelItem(item);
}
console.log(item.photoType);
var filename = generateUUID();
if (item.photoType === 'studentPic') {
$scope.pic = filename;
}
if (item.photoType === 'pickupPerson1Pic') {
$scope.pickupPerson1Pic = filename;
}
if (item.photoType === 'pickupPerson2Pic') {
$scope.pickupPerson2Pic= filename;
}
item.formData.push({
filename: filename
});
console.info('onBeforeUploadItem', item);
};
uploader.onProgressItem = function (fileItem, progress) {
console.info('onProgressItem', fileItem, progress);
};
uploader.onProgressAll = function (progress) {
console.info('onProgressAll', progress);
};
uploader.onSuccessItem = function (fileItem, response, status, headers) {
if (fileItem.photoType === 'studentPic') {
angular.element('#picPreview').attr("src", response.url);
}
if (fileItem.photoType === 'pickupPerson1Pic') {
angular.element('#pickupPerson1PicPreview').attr("src", response.url);
}
if (fileItem.photoType === 'pickupPerson2Pic') {
angular.element('#pickupPerson2PicPreview').attr("src", response.url);
}
console.info('onSuccessItem', fileItem, response, status, headers);
};
uploader.onErrorItem = function (fileItem, response, status, headers) {
console.info('onErrorItem', fileItem, response, status, headers);
};
uploader.onCancelItem = function (fileItem, response, status, headers) {
console.info('onCancelItem', fileItem, response, status, headers);
};
uploader.onCompleteItem = function (fileItem, response, status, headers) {
console.info('onCompleteItem', fileItem, response, status, headers);
};
uploader.onCompleteAll = function () {
console.info('onCompleteAll');
};
我的uploader.onBeforeUploadItem具有条件if((item._file.type!=“image / png”&amp;&amp; item._file.type!=“image / jpeg”)|| item._file.size&gt; 102400)如果成功,我调用this.cancelItem(item)方法。
uploader.onBeforeUploadItem = function (item) {
console.log("item before uploading:",item._file.type);
console.log("item before uploading:",item._file.size);
if((item._file.type!="image/png" && item._file.type!="image/jpeg") || item._file.size>102400){
console.log("in if of before");
this.cancelItem(item);
}
console.log(item.photoType);
var filename = generateUUID();
if (item.photoType === 'studentPic') {
$scope.pic = filename;
}
if (item.photoType === 'pickupPerson1Pic') {
$scope.pickupPerson1Pic = filename;
}
if (item.photoType === 'pickupPerson2Pic') {
$scope.pickupPerson2Pic= filename;
}
item.formData.push({
filename: filename
});
console.info('onBeforeUploadItem', item);
};
现在我错误地调用了取消Item方法吗?因为尽管条件匹配,项目的上传仍然成功。 请帮忙
答案 0 :(得分:0)
this.cancelItem(item)将取消正在进行的上传。
您需要在上传文件之前检查条件。
所以,例如:
<button type="button" id="upLoadFileButton" data-ng-click="validateStuffBeforeUpload(item)">Upload File</button>
然后在您的控制器中,您具有验证要验证的内容的功能,然后在成功时调用uploadItem方法并传入文件项:
$scope.validateStuffBeforeUpload = function (fileItem) {
if((item._file.type!="image/png" && item._file.type!="image/jpeg") || item._file.size>102400){
console.log("in if of before");
} else {
uploader.uploadItem(fileItem);
}
};
或者某种变化...在任何情况下,您需要在调用uploadItem方法之前验证您想要的内容。