[英]jQuery File Upload in AngularJS
我正在嘗試使用jQuery File Upload和angularJS 上傳文件 。
我有一個多步形式,這是我的多步形式的兩個步驟:
<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'
});
在我的控制器(angularjs)中我有:
$scope.options = {
maxFileSize: 5000000,
type: "POST",
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
};
正如您所看到的,我在Start upload上調用了submit()函數,但這並沒有觸發任何內容。 我的瀏覽器控制台也沒有出現任何錯誤。 我錯過了什么?
更新:
我的controller.js中沒有提交功能。 我認為這是jquery.fileupload-angular.js
添加的標准。 他們也沒有指定提交功能, 這里的例子jQuery的文件上傳+ 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);
首先包括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>
現在正如@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()
是由插件本身實現的,不需要在控制器中被我們覆蓋
更新了Plunkr,以便在上傳之前包含圖像預覽,並在插件演示中實現文件上傳的進度
我在這里拍攝。 導致submit()
不起作用的原因是聲明file-upload
指令的第三方模塊不適用於您的應用程序。 submit()
應該是file-upload
指令使用的控制器范圍的一部分。
嘗試更改app.js :
var app = angular.module('dxs-vkgroupApp', ['ngRoute', 'gettext', 'blueimp.fileupload'])
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.