javascript - AngularJS 中的 jQuery 文件上传

Question

我正在尝试使用 jQuery File Upload 上传文件与 AngularJS 结合。

我有一个多步骤表单，这是我的多步骤表单的 2 个步骤:

<div ng-switch="step">
    <div ng-switch-when="1">
        <h1>Identity</h1>
        <form name="steponeForm" data-file-upload="options" enctype="multipart/form-data" novalidate autocomplete="off">
            <input type="submit" ng-click="next(steponeForm.$valid)" value="next" /><br>

            <span class="button fileinput-button" ng-class="{disabled: disabled}">
                <input type="file" id="fileupload" name="files[]" multiple="" >
            </span>
            <button type="button" class="btn btn-primary start" data-ng-click="submit()">
                <span>Start upload</span>
            </button>

            <input ng-model="application.lastName" string-pattern required type="text" placeholder="{{ 'Last name'|translate }} *" name="appname" id="appname" />
            <div ng-show="steponeForm.$submitted || steponeForm.appname.$touched">
                <div class="error" ng-show="steponeForm.appname.$error.required">Last name is required.</div>
                <div class="error" ng-show="steponeForm.appname.$error.stringPattern">Doesn't look like a text.</div>
            </div>

            <input type="submit" ng-click="next(steponeForm.$valid)" value="next" />
        </form>
    </div>

    <div ng-switch-when="2">
        <h1>Studies</h1>
        <form name="steptwoForm" novalidate autocomplete="off">
            <input type="submit" ng-click="previous()" value="previous" />
            <input type="submit" ng-click="next(steptwoForm.$valid)" value="next" />

            <fieldset class="input-group">
                <legend translate>Lower secondary studies</legend>
                <em>Last obtained degree</em>

                <input ng-model="application.LowerSecondaryStudies.degreeTitle" type="text" placeholder="Degree Title" name="moreLowerSecondaryStudies-degreetitle" id="lwsappdegreetitle" />
                <input ng-model="application.LowerSecondaryStudies.educationAuthority" type="text" placeholder="Education authority" name="moreLowerSecondaryStudies-educationauthority" id="lwsappeducationauthority" />
                <input ng-model="application.LowerSecondaryStudies.graduationYear" style="padding: 0.5278em; width: 100%;" type="number" min="1960" max="2015" value="2015" placeholder="Graduation year" name="moreLowerSecondaryStudiesgraduationyear" id="lwsappgraduationyear" />
                <div ng-show="steptwoForm.$submitted || steptwoForm.moreLowerSecondaryStudiesgraduationyear.$touched">
                    <div class="error" ng-show="steptwoForm.moreLowerSecondaryStudiesgraduationyear.$error.number">Must be valid year.</div>
                </div>
            </fieldset>

            <input type="submit" ng-click="previous()" value="previous" />
            <input type="submit" ng-click="next(steptwoForm.$valid)" value="next" />
        </form>
    </div>
</div>

在我的自定义 js 文件中，我有:

jQuery('#fileupload').fileupload({
    dataType: 'json'
});

在我的 Controller (angularjs)中我有:

$scope.options = {
    maxFileSize: 5000000,
    type: "POST",
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
};

如您所见，我在开始上传时调用了 Submit() 函数，但这不会触发任何内容。我的浏览器控制台也没有收到任何错误。我缺少什么？

更新:

我的controller.js中没有提交功能。我认为这是使用 jquery.fileupload-angular.js 添加的标准。他们也没有指定提交函数 here在示例中jQuery fileupload + angularjs。

我的模块在app.js中的声明:

var app = angular.module('dxs-vkgroupApp', ['ngRoute', 'gettext'])
.config(function($routeProvider, $httpProvider, $locationProvider){
    // send all requests payload as query string
    $httpProvider.defaults.transformRequest = function(data){
        if (data === undefined) {
            return data;
        }
        return jQuery.param(data);
    };

    // set all post requests content type
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';

    // all routes
    $routeProvider
        .when('/edit.php/submissions/', {
            templateUrl: viewsPath.views + 'submissions.html',
            controller: 'SubmissionOverviewController'
        })
        .when('/edit.php/submission/show/:fid/', {
            templateUrl: viewsPath.views + 'submission.html',
            controller: 'ShowSubmissionController'
        })
        .when('/edit.php/submission/delete/:fid/', {
            templateUrl: viewsPath.views + 'delete-submission.html',
            controller: 'DeleteSubmissionController'
        })
        .when('/wp-admin/', {
            controller: 'RouteDeciderController',
            template: '<div ng-include="getTemplateUrl()"></div>'
        })
        .when('/:l/submission/new/:jid', {
            templateUrl: viewsPath.views + 'new-submission.html',
            controller: 'StepController'
        })
        .when('/:l/projects/', {
            templateUrl: viewsPath.views + 'projects.html',
            controller: 'ProjectsOverviewController'
        }).otherwise({
            controller: 'RouteDeciderController',
            template: '<div ng-include="getTemplateUrl()"></div>'
        });

    $locationProvider.html5Mode(true);
})
.run(function (gettextCatalog, $location) {
    var curr_path = $location.path();
    var result = curr_path.split("/");
    var language = result[1];

    gettextCatalog.setCurrentLanguage(language);
    gettextCatalog.debug = true;
});

在我的 controller.js 中，我有以下内容:

/**
 * Deals with advancing, going back or finishing the multi step form
 *
 * @param $scope
 * @param $http
 * @param $routeParams
 * @constructor
 */
function StepController($scope, $http, $routeParams)
{
    // inits
    $scope.application = {};
    $scope.application.children = [];

    // counters
    $scope.childCounter = 0;
    $scope.moreLowerSecondaryStudiesCounter = 0;
    $scope.moreHigherSecondaryStudiesCounter = 0;
    $scope.moreHigherShortTermEducationCounter = 0;
    $scope.moreHigherLongTermEducationCounter = 0;
    $scope.moreAdditionalStudiesSpecialtyCounter = 0;
    $scope.moreAdditionalStudiesThesisCounter = 0;
    $scope.languageCounter = 0;
    $scope.experienceCounter = 0;

    // select options
    $scope.languageOptions = ['--select--', 'very good', 'good', 'notions', 'no notion'];

    // languages
    // @todo make the default list dynamic instead of hardcoded (problem is, the variable expressions wont get accepted in the select attributes)
    //$scope.languages = ['dutch', 'french', 'english', 'german'];

    $scope.job_id = $routeParams.jid;

    $scope.step = 1;

    $scope.noneSelected = function (type) {
        switch(type)
        {
            case 'appcontact':
                    if(!$scope.application.contact){
                        return true;
                    }
                    else
                    {
                        return !($scope.application.contact.relations || $scope.application.contact.employees || $scope.application.contact.jobad || $scope.application.contact.website || $scope.application.contact.other)
                    }
                break;
            case 'appworklocation':
                    if(!$scope.application.worklocation){
                        return true;
                    }
                    else
                    {
                        return !($scope.application.worklocation.roeselare || $scope.application.worklocation.brussel || $scope.application.worklocation.merelbeke)
                    }
                break;
        }
    };

    $scope.next = function($valid){
        if(!$valid)
        {
            $scope.step = $scope.step;
        }
        else if($scope.step == 2)
        {
            $scope.inputgrouperror = false;

            // special check for 6 input groups (input fields)
            if(check())
            {
                $scope.step += 1;
            }
            else
            {
                $scope.inputgrouperror = true;
                $scope.step = $scope.step;
            }
        }
        else
        {
            $scope.step += 1;
        }

        window.scrollTo(0,0);
    };

    $scope.previous = function(){
        $scope.step -= 1;
        window.scrollTo(0,0);
    };

    $scope.finish = function($valid){
        if(!$valid)
        {
            $scope.step = $scope.step;
        }
        else
        {
            $http.post('new-submission', { id: $scope.job_id, application: $scope.application })
                .success(function(data, status, headers, config){
                    window.location.href = data.redirect_url;
                });
        }
    };
}

function check() {
    var check = false;
    jQuery.each(jQuery('fieldset.input-group'), function () { //loops through all fieldsets
        if (!check) { //are there no fieldsets with  3 filled input elements then check is false so far
            check = jQuery(this).find('input:text,[type^="number"]').filter(function () { //checks whether inputs are filled
                return this.value != "";
            }).length > 2; //If filled inputs > 2 -> check = true
        }
    });

    return check;
}

angular.module('dxs-vkgroupApp')
    .controller('StepController', StepController);

Answer 1

首先包含 jQuery 文件上传插件的所有基本文件

<!-- jQuery File Upload Stylesheets -->
<link rel="stylesheet" href="jquery.fileupload.css" />
<link rel="stylesheet" href="jquery.fileupload-ui.css" />

<!-- The Load Image plugin is included for image preview and resizing functionality -->
<script src="load-image.all.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="canvas-to-blob.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="jquery.fileupload-image.js"></script>
<!-- The File Upload validation plugin -->
<script src="jquery.fileupload-validate.js"></script>
<!-- The File Upload Angular JS module -->
<script src="jquery.fileupload-angular.js"></script>

现在正如 @Discosultan 提到的，在 app.js 文件中包含 blueimp.fileupload 模块

var app = angular.module('dxs-vkgroupApp', ['blueimp.fileupload', 'ngRoute', 'gettext'])

请务必在 form 标记的 action 属性中提及您必须将图像上传到的 URL

<form action="//jquery-file-upload.appspot.com/" file-upload="options" 
enctype="multipart/form-data" name="steponeForm" novalidate autocomplete="off">
....
  <!-- Add Files Button -->
  <span class="btn btn-success fileinput-button">
    <i class="glyphicon glyphicon-plus"></i>
  <span>Add files...</span>
  <input type="file" name="files" multiple="" ng-disabled="disabled">
  </span>

  <!-- Start Upload Button -->
  <button type="button" class="btn btn-primary start" ng-click="submit()">
    <i class="glyphicon glyphicon-upload"></i>
    <span>Start upload</span>
  </button>
....
</form>

或者在传递给file-upload指令的options对象中

$scope.options = {
    maxFileSize: 5000000,
    type: "POST",
    url:'//jquery-file-upload.appspot.com/',
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
};

另外需要注意的是，HTML模板中提到的submit()是由Plugin本身实现的，不需要我们在 Controller 中重写

更新了Plunkr包括上传前的图像预览以及插件演示中实现的文件上传进度