使用 AngularJS 和 bluimp 上传另一个表单的成功回调文件 - IT屋-程序员软件开发技术分享社区
首页 其他开发 使用 AngularJS 和 bluimp 上传另一个表单的成功回调文件
使用 AngularJS 和 bluimp 上传另一个表单的成功回调文件
[英] Uploading a file with AngularJS and bluimp on success callback of another form
本文介绍了使用 AngularJS 和 bluimp 上传另一个表单的成功回调文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我关注了 遵循 教程，以便在我的 AngularJS 项目中集成臭名昭著的 bluimp jQuery 文件上传器.
经过一些研究，我发现在选项数组中，在 jquery.fileuploader.js 文件中，有一个名为 autoUpload 的选项，当设置为 true 时会自动上传文件.我试图禁用它(假，未定义)，但很快我发现这会导致上传根本不起作用，甚至在表单提交上也不起作用.
我需要手动触发上传，比如在另一个回调中，或者通过点击事件.可以吗?.
代码:
app.directive("fileupload", function() {返回 {限制:A"，范围: {完成:&"，进度: "&",失败: "&",上传网址:="，自定义数据:&"},链接:功能(范围，元素，属性){var 上传选项；上传选项 = {网址:scope.uploadurl，数据类型:json"};如果(范围.完成){uploadOptions.done = 函数(e，数据){返回范围. $apply(function() {返回范围.done({电子:电子，数据:数据});});};}如果(范围.失败){uploadOptions.fail = 函数(e，数据){返回范围. $apply(function() {返回范围.失败({电子:电子，数据:数据});});};}如果(范围.进度){uploadOptions.progress = 函数(e，数据){返回范围. $apply(function() {返回范围.进度({电子:电子，数据:数据});});};}return elem.fileupload(uploadOptions).bind("fileuploadsubmit", function(e, data) {返回 data.formData = {JSON.stringify(scope.customdata())};});}};});app.service('uploadService', function(authService) {var initializeFn, processFn;initializeFn = 函数(e，数据，进程){无功上传；返回上传 = {信息: ''，上传网址:authService.getBaseUrl() + '/applications/',状态:假};};processFn = 函数(e，数据，进程){var 文件，上传；上传 = {};上传.successData = [];上传状态 = 真；上传错误=假；如果(过程 === '完成'){上传.消息 = 数据.结果.结果;控制台日志(数据)；文件 = data.result.resume;上传.成功数据 = {//名称:文件名，//fullUrl: file.url,//拇指网址:file.thumbnail_url};} else if (process === '进度') {upload.message = '上传中....!!!';} 别的 {上传错误=真；upload.message = '请再试一次';console.log(e, 数据);}返回上传；};返回 {进程:processFn，初始化: 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() {返回 $scope.model.formData;};返回 $scope.uploadReturn = uploadService.initialize();});查看:
</fieldset></表单>
脚本加载顺序:
<代码>...<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> </html>
解决方案
Blueimp 有一个 AngularJS 版本的 jQuery 文件上传可用.
它包括一个 fileUpload 指令和一个 FileUploadController 以及一个您可以手动调用的 submit() 方法.
您可以在 http://blueimp.github.io/jQuery-File- 看到工作版本上传/angularjs.html .
您应该注意的一件事:确保以正确的顺序加载示例中的所有 .js 文件以避免出现问题(参见示例页面的源代码).
希望有帮助！
<小时>发表评论后更新:
当使用 AngularJS 版本的 jQuery File Upload 时，您创建一个带有 file-upload 属性的表单标签，如下所示:
<!-- 使用从您的范围传入的选项创建文件上传表单 --><form data-file-upload="options" data-ng-controller="YourController"><!-- 此按钮将触发文件选择对话框--><span class="btn btn-success fileinput-button" ng-class="{disabled: disabled}"><span>添加文件...</span><input type="file" name="files[]" multiple="" ng-disabled="disabled"></span><!-- 此按钮将开始上传--><button type="button" class="btn btn-primary start" data-ng-click="submit()"><span>开始上传</span><表格>然后在您的控制器中，您可以像这样为 jQuery 文件上传分配选项:
angular.module('yourModule').controller('YourController', [$scope, function($scope){//要传递给 jQuery 文件上传的选项，例如:$scope.options = {最大文件大小:5000000，接受文件类型:/(\.|\/)(gif|jpe?g|png)$/i};}]);您可以将 submit() 处理程序分配给任何 ng-click 属性，只要它位于表单内部(从而可以访问该方法).
如果您需要进一步的帮助，请告诉我...
<小时>用于成功回调的额外示例代码:
如果需要在所有 上传完成后运行回调函数，可以监听Blueimp广播的fileuploadstop事件:
//监听文件上传停止事件$scope.$on('fileuploadstop', function(){//你的代码在这里console.log('所有上传完成');});希望有帮助！
I have followed the following tutorial in order to integrate the notorious bluimp jQuery file uploader in my AngularJS project.
After some research I found that in the options array, witihn the jquery.fileuploader.js file, there is an option called autoUpload, which when set to true upload the file automatically.
I tried to disable it(false, undefined), but quickly I learned out that this causes the upload not to function at all, not even on the form submit.
I need to trigger the upload manually, say within another callback, or by a click event.
can that be done?.
code:
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();
});
view:
<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>
scripts loading order:
...
<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 has an AngularJS version of jQuery File Upload available.
It includes a fileUpload directive and a FileUploadController with a submit() method that you can call manually.
You can see a working version at http://blueimp.github.io/jQuery-File-Upload/angularjs.html .
One thing you should pay attention to: make sure you load all .js files from the example in the correct order to avoid problems (cf. source of the example page).
Hope that helps!
UPDATE AFTER YOUR COMMENT:
When using the AngularJS version of jQuery File Upload, you create a form tag with the file-upload attribute like this:
<!-- 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>
Then in your controller you can assign the options for the jQuery File Upload like this:
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
};
}]);
You can assign the submit() handler to any ng-click attribute as long as it is inside the form (and thus can access the method).
Let me know if you need further help...
EXTRA SAMPLE CODE FOR SUCCESS CALLBACK:
If you need to run a callback function after all uploads have been completed, you can listen to the fileuploadstop event that is broadcasted by Blueimp:
// Listen to fileuploadstop event
$scope.$on('fileuploadstop', function(){
// Your code here
console.log('All uploads have finished');
});
Hope that helps!
这篇关于使用 AngularJS 和 bluimp 上传另一个表单的成功回调文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
