gpt4 book ai didi

angularjs - 在另一种形式的成功回调中使用 AngularJS 和 bluimp 上传文件

转载 作者:行者123 更新时间:2023-12-02 10:21:47 24 4
gpt4 key购买 nike

我已关注following教程,以便将臭名昭著的 bluimp jQuery 文件 uploader 集成到我的 AngularJS 项目中。

经过一番研究,我发现在 jquery.fileuploader.js 文件的 options 数组中,有一个名为 autoUpload 的选项,当设置为 true 时,会自动上传文件。我尝试禁用它(错误,未定义),但很快我发现这会导致上传根本无法运行,甚至在表单提交上也无法运行。

我需要手动触发上传,例如在另一个回调中或通过点击事件。可以吗?

代码:

app.directive("fileupload", function() {
return {
restrict: "A",
scope: {
done: "&",
progress: "&",
fail: "&",
uploadurl: "=",
customdata: "&"
},
link: function(scope, elem, attrs) {
var uploadOptions;
uploadOptions = {
url: scope.uploadurl,
dataType: "json"
};
if (scope.done) {
uploadOptions.done = function(e, data) {
return scope.$apply(function() {
return scope.done({
e: e,
data: data
});
});
};
}
if (scope.fail) {
uploadOptions.fail = function(e, data) {
return scope.$apply(function() {
return scope.fail({
e: e,
data: data
});
});
};
}
if (scope.progress) {
uploadOptions.progress = function(e, data) {
return scope.$apply(function() {
return scope.progress({
e: e,
data: data
});
});
};
}
return elem.fileupload(uploadOptions).bind("fileuploadsubmit", function(e, data) {
return data.formData = {
JSON.stringify(scope.customdata())
};
});
}
};
});
app.service('uploadService', function(authService) {
var initializeFn, processFn;
initializeFn = function(e, data, process) {
var upload;
return upload = {
message: '',
uploadurl: authService.getBaseUrl() + '/applications/',
status: false
};
};
processFn = function(e, data, process) {
var file, upload;
upload = {};
upload.successData = [];
upload.status = true;
upload.error = false;
if (process === 'done') {
upload.message = data.result.result;
console.log(data);
file = data.result.resume;
upload.successData = {
// name: file.name,
// fullUrl: file.url,
// thumbUrl: file.thumbnail_url
};
} else if (process === 'progress') {
upload.message = 'Uploading....!!!';
} else {
upload.error = true;
upload.message = 'Please try again';
console.log(e, data);
}
return upload;
};
return {
process: processFn,
initialize: initializeFn
};

});

app.controller('applyCtrl', function($scope, $routeParams, uploadService){
$scope.model.formData = {};
$scope.model.formData.job = $routeParams.jobId;
$scope.uploadLayer = function(e, data, process) {
return $scope.uploadReturn = uploadService.process(e, data, process);
};
$scope.customData = function() {
return $scope.model.formData;
};
return $scope.uploadReturn = uploadService.initialize();

});

查看:

    <form class="applyForm" ng-submit="uploadLayer(e, data, 'progress')">
<fieldset>
<div class="formLine">
<div class="wideFieldContainer">
<input id="testUpload" type="file" fileupload customdata="customData()" name="resume" uploadurl="uploadReturn.uploadurl" done="uploadLayer(e, data, 'done')" fail="uploadLayer(e, data, 'fail')" progress="uploadLayer(e, data, 'progress')" />
</div>
</div>
</fieldset>
</form>

脚本加载顺序:

...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="lib/bluimp/js/vendor/jquery.ui.widget.js"></script>
<script src="lib/bluimp/js/jquery.piframe-transport.js"></script>
<script src="lib/bluimp/js/jquery.fileupload.js"></script>
</body>
</html>

最佳答案

Blueimp 有 AngularJS 版本的 jQuery 文件上传可用。

它包括一个 fileUpload 指令和一个 FileUploadController 以及一个您可以手动调用的 submit() 方法。

您可以在http://blueimp.github.io/jQuery-File-Upload/angularjs.html查看工作版本.

您应该注意的一件事:确保以正确的顺序加载示例中的所有 .js 文件,以避免出现问题(参见示例页面的源代码)。

希望有帮助!

<小时/>

发表评论后更新:

当使用 AngularJS 版本的 jQuery 文件上传时,您可以创建一个带有 file-upload 属性的表单标签,如下所示:

<!-- Create a file upload form with options passed in from your scope -->
<form data-file-upload="options" data-ng-controller="YourController">

<!-- This button will trigger a file selection dialog -->
<span class="btn btn-success fileinput-button" ng-class="{disabled: disabled}">
<span>Add files...</span>
<input type="file" name="files[]" multiple="" ng-disabled="disabled">
</span>

<!-- This button will start the upload -->
<button type="button" class="btn btn-primary start" data-ng-click="submit()">
<span>Start upload</span>
</button>

<form>

然后在您的 Controller 中,您可以为 jQuery 文件上传分配选项,如下所示:

angular.module('yourModule')
.controller('YourController', [$scope, function($scope){

// Options you want to pass to jQuery File Upload e.g.:
$scope.options = {
maxFileSize: 5000000,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
};
}]);

您可以将 submit() 处理程序分配给任何 ng-click 属性,只要它位于表单内部(因此可以访问该方法)。

如果您需要进一步帮助,请告诉我...

<小时/>

成功回调的额外示例代码:

如果您需要在所有上传完成后运行回调函数,您可以监听 Blueimp 广播的 fileuploadstop 事件:

// Listen to fileuploadstop event
$scope.$on('fileuploadstop', function(){

// Your code here
console.log('All uploads have finished');
});

希望有帮助!

关于angularjs - 在另一种形式的成功回调中使用 AngularJS 和 bluimp 上传文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18445551/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com