Tải lên tệp jQuery trong AngularJS

Question

Tôi đang cố gắng tải lên tệp với jQuery File Upload kết hợp với angularJS.

Tôi có một hình thức nhiều bước, đây là 2 bước của hình thức nhiều bước của tôi:

<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> 

Trong tập tin tùy chỉnh của tôi js tôi có:

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

Trong điều khiển của tôi (angularjs) Tôi có:

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

Như bạn có thể thấy, tôi gọi hàm submit() trên Bắt đầu tải lên nhưng điều đó không kích hoạt bất kỳ thứ gì. Tôi cũng không nhận được bất kỳ lỗi nào trong bảng điều khiển trình duyệt của mình. Tôi đang thiếu gì?

UPDATE:

Tôi không có một chức năng trình trong controller.js tôi. Tôi nghĩ rằng đây là tiêu chuẩn được thêm vào với jquery.fileupload-angular.js. Họ cũng không chỉ định chức năng gửi here trong ví dụ tải tệp tin jQuery + angularjs.

Việc kê khai của mô-đun của tôi trong 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; 
}); 

Trong controller.js tôi Tôi có giữa những thứ khác:

/** 
* 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

Tôi đang tham gia một shot đây . Nguyên nhân gây ra submit() không hoạt động là thực tế mô-đun bên thứ ba khai báo chỉ thị file-upload không khả dụng cho ứng dụng của bạn. submit() phải là một phần của phạm vi cho bộ điều khiển được sử dụng bởi chỉ thị file-upload.

Hãy thử thay đổi app.js:

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

Answer 2

Thứ nhất bao gồm tất cả các tập tin cơ bản cho jQuery File Upload Plugin

<!-- 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> 

Bây giờ là @Discosultan đề cập, bao gồm các module blueimp.fileupload trong ứng dụng.js nộp

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

Hãy chắc chắn để đề cập URL mà bạn phải tải hình ảnh lên, hoặc trong action thuộc tính form thẻ của

<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> 

hoặc trong đối tượng options truyền cho file-upload chỉ

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

Một điều cần lưu ý là, submit() được đề cập trong mẫu HTML được triển khai ed bởi Plugin bản thân và không cần phải được ghi đè bởi chúng ta trong bộ điều khiển

Cập nhật các Plunkr bao gồm xem trước hình ảnh trước khi tải lên và tiến độ upload file như thực hiện trong plugin bản demo