我正在使用此插件http://blueimp.github.io/jQuery-File-Upload/angularjs.html
处理使用Angular的jQuery文件上传一切正常，除了取消按钮，它取消了文件，但我在控制台中出现错误https://www.dropbox.com/s/nup2vkwfsfslqcu/cancel_error.PNG
我有app.js
(function () {
'use strict';
var isOnGitHub = window.location.hostname === 'blueimp.github.io',
url = isOnGitHub ? '//jquery-file-upload.appspot.com/' : '/api/imageUpload';
angular.module('myApp', [
'blueimp.fileupload'
])
.config([
'$httpProvider', 'fileUploadProvider',
function ($httpProvider, fileUploadProvider) {
delete $httpProvider.defaults.headers.common['X-Requested-With'];
fileUploadProvider.defaults.redirect = window.location.href.replace(
/\/[^\/]*$/,
'/cors/result.html?%s'
);
if (isOnGitHub) {
// Demo settings:
angular.extend(fileUploadProvider.defaults, {
// Enable image resizing, except for Android and Opera,
// which actually support image resizing, but fail to
// send Blob objects via XHR requests:
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent),
maxFileSize: 5000000,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
});
}
}
])
.controller('DemoFileUploadController', [
'$scope', '$http', '$filter', '$window',
function ($scope, $http) {
$scope.options = {
url: url
};
$scope.setCover = function () {
var fileId;
$('input[type="radio"]').each(function () {
if ($(this).is(":checked")) { fileId = $(this).attr('id'); }
});
return $http({
url: "/home/SetCoverImage/?fileId=" + fileId,
method: "post"
}).then(
function () {
console.log("succcess");
},
function () {
console.log("error");
}
);
};
}
])
.controller('FileDestroyController', [
'$scope', '$http',
function ($scope, $http) {
var file = $scope.file,
state;
if (file.name) {
file.$destroy = function () {
state = 'pending';
return $http({
url: "/api/imageupload/?id=" + file.id,
method: "delete"
}).then(
function () {
state = 'resolved';
$scope.clear(file);
},
function () {
state = 'rejected';
}
);
};
file.$cancel = function () {
console.log("cancel individual");
$scope.clear(file);
};
}
}
]);
}());
html定义为
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/css/style.css" rel="stylesheet" />
<link href="~/Content/css/jquery.fileupload.css" rel="stylesheet" />
<link href="~/Content/css/jquery.fileupload-ui.css" rel="stylesheet" />
<style>
/* Hide Angular JS elements before initializing */
.ng-cloak {
display: none;
}
</style>
@section scripts{
<script src="~/Scripts/js/vendor/jquery.ui.widget.js"></script>
<script src="http://blueimp.github.io/JavaScript-Load-Image/js/load-image.min.js"></script>
<script src="http://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/js/jquery.iframe-transport.js"></script>
<script src="~/Scripts/js/jquery.fileupload.js"></script>
<script src="~/Scripts/js/jquery.fileupload-process.js"></script>
<script src="~/Scripts/js/jquery.fileupload-image.js"></script>
<script src="~/Scripts/js/jquery.fileupload-validate.js"></script>
<script src="~/Scripts/lib/angular.min.js"></script>
<script src="~/Scripts/js/jquery.fileupload-angular.js"></script>
<script src="~/Scripts/js/app.js"></script>
}
<div class="form-group row">
<div data-ng-app="myApp" data-ng-controller="DemoFileUploadController" data-file-upload="options" data-ng-class="{'fileupload-processing': processing() || loadingFiles}">
<!-- Redirect browsers with JavaScript disabled to the origin page -->
<noscript><input type="hidden" name="redirect" value="http://www.myapp.com"></noscript>
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button" ng-class="{disabled: disabled}">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple ng-disabled="disabled">
</span>
<button type="button" class="btn btn-warning cancel" data-ng-click="cancel()">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel upload</span>
</button>
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</div>
<!-- The global progress state -->
<div class="col-lg-5 fade" data-ng-class="{in: active()}">
<!-- The global progress bar -->
<div class="progress progress-striped active" data-file-upload-progress="progress()"><div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div></div>
<!-- The extended global progress state -->
<div class="progress-extended"> </div>
</div>
</div>
<!-- The table listing the files available for upload/download -->
<table class="table table-striped files ng-cloak">
<tr data-ng-repeat="file in queue" data-ng-class="{'Uploading': file.$processing()}">
<td data-ng-switch data-on="!!file.thumbnailUrl">
<div class="preview" data-ng-switch-when="true">
<a data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery><img data-ng-src="{{file.thumbnailUrl}}" alt=""></a>
</div>
<div class="preview" data-ng-switch-default data-file-upload-preview="file"></div>
</td>
<td>
<p class="name" data-ng-switch data-on="!!file.url">
<span data-ng-switch-when="true" data-ng-switch data-on="!!file.thumbnailUrl">
<a data-ng-switch-when="true" data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery>{{file.name}}</a>
<a data-ng-switch-default data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}">{{file.name}}</a>
</span>
<span data-ng-switch-default>{{file.name}}</span>
</p>
<strong data-ng-show="file.error" class="error text-danger">{{file.error}}</strong>
</td>
<td>
<p class="size">{{file.size | formatFileSize}}</p>
<div class="progress progress-striped active fade" data-ng-class="{pending: 'in'}[file.$state()]" data-file-upload-progress="file.$progress()"><div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div></div>
</td>
<td>
<div>
<div class="control-label">
<input type="radio" id="{{file.id}}" name="cover" /> <label>Set Cover</label>
</div>
</div>
</td>
<td>
<button type="button" class="btn btn-primary start" data-ng-click="file.$submit()" data-ng-hide="!file.$submit || options.autoUpload" data-ng-disabled="file.$state() == 'pending' || file.$state() == 'rejected'">
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
<button type="button" class="btn btn-warning cancel" data-ng-click="file.$cancel()" data-ng-show="file.isUploaded">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
<button data-ng-controller="FileDestroyController" type="button" class="btn btn-danger destroy" data-ng-click="file.$destroy()" data-ng-hide="!file.$destroy">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
</td>
</tr>
</table>
<div class="form-group row">
<div class="col-md-8 col-md-offset-4">
<button data-ng-click="setCover()" class="btn btn-primary" type="submit">Submit</button>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
您可以尝试覆盖progress功能。这是一个临时修复。
fileUploadProvider.defaults.progress = function(e, data) {
if (e.isDefaultPrevented()) {
return false;
}
if (!data.scope.$$phase) {
data.scope.$apply();
}
};