如何使用jQuery的文件上传角版本？ [英] how to use jquery file upload angular version?

问题描述

下面是我如何使用jQuery的角度文件上传

here is how I use angular jquery file upload

var album = angular.module('album', ['restangular', 'blueimp.fileupload']),

.controller('somecontroller',function($scope,){
    $scope.options = {
        something
    }

 })

我所做的只是设置scope.options，改变控制器，一切都神奇地工作

all I did was set the scope.options, change the controller ,and everything just magically works

设置jQuery的文件上传似乎很简单，但也有一些真正的让我困惑

setup the jquery file upload seems quite easy, but there are something really confuse me

我怎么能叫jQuery的文件上传的回调函数。例如，如果成功上传的文件，我想通过调用函数fileuploaddone更新UI，它让我困惑，因为在我的控制器中没有添加的文件。

how can I call the jquery file upload's callback function. for example, if the files uploaded successfully,I want to update the ui by calling fileuploaddone function ,it confuse me because there is no added file in my controller.

我是新来angularJS，请帮我理解的角度jQuery的文件上传的工作流程

I'm new to angularJS, please help me to understand the workflow of angular jquery file upload

推荐答案

在blueimp.fileupload将使用通过$触发的事件发出通知家长的范围：

the blueimp.fileupload uses events that are fired via $emit to notify parent scopes:

             on([
                'fileuploadadd',
                'fileuploadsubmit',
                'fileuploadsend',
                'fileuploaddone',
                'fileuploadfail',
                'fileuploadalways',
                'fileuploadprogress',
                'fileuploadprogressall',
                'fileuploadstart',
                'fileuploadstop',
                'fileuploadchange',
                'fileuploadpaste',
                'fileuploaddrop',
                'fileuploaddragover',
                'fileuploadchunksend',
                'fileuploadchunkdone',
                'fileuploadchunkfail',
                'fileuploadchunkalways',
                'fileuploadprocessstart',
                'fileuploadprocess',
                'fileuploadprocessdone',
                'fileuploadprocessfail',
                'fileuploadprocessalways',
                'fileuploadprocessstop'
            ].join(' '), function (e, data) {
                if ($scope.$emit(e.type, data).defaultPrevented) {
                    e.preventDefault();
                }
            })

这意味着，你可以简单地在父范围控制器之一，例如添加事件侦听器：

That means that you can simply add an event listener in one of the parent scope controllers, e.g.:

$scope.$on('fileuploadprocessdone', function(event, files){ 
    $.each(files, function (index, file) {
        //do what you want
    });
});

您也可以覆盖默认用handleResponse功能在你的配置阶段，例如：

You can also override the default handleResponse function in your config phase, e.g.:

angular.module('myApp', ['blueimp.fileupload']).
.config(['fileUploadProvider', function (fileUploadProvider){
    fileUploadProvider.defaults.handleResponse = function (e,data){
        var files = data.result && data.result.files;
        if (files) {
            data.scope().replace(data.files, files);
            // do what you want...
        } else if (data.errorThrown || data.textStatus === 'error') {
             data.files[0].error = data.errorThrown ||
             data.textStatus;
        }
     };     
}]);

这篇关于如何使用jQuery的文件上传角版本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！