上传与AngularJS的文件，并在bluimp另一种形式的成功回调 [英] Uploading a file with AngularJS and bluimp on success callback of another form
问题描述
我也跟着的以下，以臭名昭著的bluimp jQuery的文件上传在我AngularJS项目集成教程。
一些研究，我发现，选择数组中，witihn的jquery.fileuploader.js文件，有一个名为autoUpload一个选项，如果设置为true上传文件后自动。
我试图禁用它（假的，不确定的），但很快我了解到了，这会导致上传完全不工作，甚至没有在表格提交。
我需要手动触发上传，说一个回调中，或通过单击事件。
可以在做些什么呢？
code：
app.directive（文件上传功能（）{
返回{
限制：A，
范围： {
完成：与＆amp;，
进展：与＆amp;，
失败：＆放大器;，
的uploadURL：=，
的CustomData：与＆amp;
}，
链接：功能（范围，ELEM，ATTRS）{
VAR uploadOptions;
uploadOptions = {
网址：scope.uploadurl，
数据类型：JSON
};
如果（scope.done）{
uploadOptions.done =功能（即数据）{
返回范围。$应用（函数（）{
返回scope.done（{
E：E，
数据：数据
}）;
}）;
};
}
如果（scope.fail）{
uploadOptions.fail =功能（即数据）{
返回范围。$应用（函数（）{
返回scope.fail（{
E：E，
数据：数据
}）;
}）;
};
}
如果（scope.progress）{
uploadOptions.progress =功能（即数据）{
返回范围。$应用（函数（）{
返回scope.progress（{
E：E，
数据：数据
}）;
}）;
};
}
返回elem.fileupload（uploadOptions）.bind（fileuploadsubmit功能（即数据）{
返回data.formData = {
JSON.stringify（scope.customdata（））
};
}）;
}
};
}）;
app.service（'uploadService'，函数（authService）{
VAR initializeFn，processFn;
initializeFn =功能（即，数据，流程）{
VAR上传;
返回上传= {
信息： ''，
的uploadURL：authService.getBaseUrl（）+'/应用/'，
状态：假的
};
};
processFn =功能（即，数据，流程）{
var文件，上传;
上传= {};
upload.successData = [];
upload.status = TRUE;
upload.error = FALSE;
如果（过程==='做'）{
upload.message = data.result.result;
的console.log（数据）;
文件= data.result.resume;
upload.successData = {
//名称：file.name，
// fullUrl：file.url，
// thumbUrl：file.thumbnail_url
};
}否则如果（过程==='进步'）{
upload.message ='上传....！;
}其他{
upload.error = TRUE;
upload.message ='请重试;
的console.log（即数据）;
}
返回上传;
};
返回{
过程：processFn，
初始化：initializeFn
}; }）;app.controller（'applyCtrl'，函数（$范围，$ routeParams，uploadService）{
$ scope.model.formData = {};
$ scope.model.formData.job = $ routeParams.jobId;
$ scope.uploadLayer =功能（即，数据，流程）{
返回$ scope.uploadReturn = uploadService.process（即，数据，流程）;
};
$ scope.customData =功能（）{
返回$ scope.model.formData;
};
返回$ scope.uploadReturn = uploadService.initialize（）;}）;
查看：
＆LT;窗体类=applyFormNG提交=uploadLayer（即数据，'进步'）＆GT;
＆LT;＆字段集GT;
＆LT; DIV CLASS =formLine＆GT;
＆LT; DIV CLASS =wideFieldContainer＆GT;
＆LT;输入ID =testUpload类型=文件文件上传的CustomData =的CustomData（）NAME =简历的uploadURL =uploadReturn.uploadurl做=uploadLayer（即数据，'完成'）不及格= uploadLayer（即数据，'失败'）进步=uploadLayer（即数据，'进步'）/＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /字段集＆GT;
＆LT; /表及GT;
脚本加载顺序：
...
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"></script>
＆所述; SCRIPT SRC =LIB /角度/ angular.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =LIB /角度/角resource.js＆GT;＆下; /脚本＆GT;
＆LT;脚本SRC =JS / app.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS / services.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS / controllers.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS / filters.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS / directives.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =LIB / bluimp / JS /供应商/ jquery.ui.widget.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =LIB / bluimp / JS / jquery.piframe-transport.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =LIB / bluimp / JS / jquery.fileupload.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
Blueimp有jQuery的文件上传可用的AngularJS版本。
它包括一个提交（）文件上传指令和 FileUploadController code>方法，你可以手动调用。
您可以看到在<一个工作版本href=\"http://blueimp.github.io/jQuery-File-Upload/angularjs.html\">http://blueimp.github.io/jQuery-File-Upload/angularjs.html.
有一件事你要注意：确保你从这个例子中加载正确的顺序，以避免出现问题（示例页面的参照源）的所有.js文件
希望帮助！
更新后，您的评论：
在使用jQuery文件上传的AngularJS版本，您创建一个文件上传属性像这样的表单标签：
＆LT;！ - 创建从你的范围，通过选项的文件上传表单 - ＆GT;
＆LT;表单数据文件上传=选择数据-NG-控制器=YourController＆GT; ＆LT;！ - 这个按钮会触发文件选择对话框 - ＆GT;
＆LT;跨度类=BTN BTN-成功的FileInput键NG-CLASS ={禁用：禁用}＆GT;
＆LT;跨度＆gt;添加文件...＆LT; / SPAN＆GT;
＆LT;输入类型=文件名称=文件[]多重=NG-禁用=禁用＆GT;
＆LT; / SPAN＆GT; ＆LT;！ - 这个按钮将启动上传 - ＆GT;
＆LT;按钮式=按钮级=BTN BTN-小学启动数据-NG-点击=提交（）＆GT;
＆LT;跨度＆GT;开始上传＆LT; / SPAN＆GT;
＆LT; /按钮＆GT;＆LT;形式为GT;
然后在您的控制器，可以分配选项jQuery的文件上传这样的：
angular.module（'yourModule'）
.controller（'YourController'，[$范围，功能（$范围）{ 你想传递给jQuery的文件上传例如//选项：
$ scope.options = {
MAXFILESIZE：5000000
acceptFileTypes：/(\\.|\\/)(gif|jpe?g|png)$/i
};
}]）;
您可以指定提交（）处理任何 NG-点击属性，只要它里面的形式（因此可以访问方法）。
让我知道如果你需要进一步的帮助...
外加抽样code对于成功回调：
如果你需要运行后的回调函数的所有上传已经完成，你可以听由Blueimp播出的 fileuploadstop 事件
//听fileuploadstop事件
$范围。在$（'fileuploadstop'，函数（）{ //你的code在这里
的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屋！
