10

angular jqueryファイルのアップロードの使用方法は次のとおりです

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

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

 })

私がしたことは、scope.optionsを設定し、コントローラーを変更するだけで、すべてが魔法のように機能します

jqueryファイルのアップロードをセットアップするのはとても簡単に思えますが、本当に混乱することがあります

jquery ファイル アップロードのコールバック関数を呼び出す方法を教えてください。たとえば、ファイルが正常にアップロードされた場合、fileuploaddone 関数を呼び出して UI を更新したいのですが、コントローラーに追加されたファイルがないため、混乱します。

angularJS は初めてです。角度のある jquery ファイルのアップロードのワークフローを理解するのを手伝ってください

4

1 に答える 1

25

blueimp.fileupload は、$emit を介して発生するイベントを使用して、親スコープに通知します。

             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();
                }
            })

つまり、親スコープ コントローラーの 1 つにイベント リスナーを簡単に追加できます。

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

config フェーズでデフォルトの handleResponse 関数をオーバーライドすることもできます。

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;
        }
     };     
}]);
于 2013-07-22T09:40:04.150 に答える