我遵循了
following教程,以便在我的AngularJS项目中集成臭名昭着的bluimp jQuery文件上传器.
经过一些研究,我发现在options数组中,在jquery.fileuploader.js文件中,有一个名为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,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,process) { return $scope.uploadReturn = uploadService.process(e,process); }; $scope.customData = function() { return $scope.model.formData; }; return $scope.uploadReturn = uploadService.initialize(); });
视图:
<form class="applyForm" ng-submit="uploadLayer(e,'progress')"> <fieldset> <div class="formline"> <div class="wideFieldContainer"> <input id="testUpload" type="file" fileupload customdata="customData()" name="resume" uploadurl="uploadReturn.uploadurl" done="uploadLayer(e,'done')" fail="uploadLayer(e,'fail')" progress="uploadLayer(e,'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>
然后在您的控制器中,您可以为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'); });
希望有所帮助!