<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<link href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css" rel="stylesheet" />
<script data-require="angular.js@*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="fileUploadDemoController">
<h1>Kendo UI upload file</h1>
<form ng-submit="submit($event)">
<div class="form-group">
<label><input type="radio" name="kind" ng-model="kind" ng-value="'multi'" ng-required="true" />Multi</label>
<label><input type="radio" name="kind" ng-model="kind" ng-value="'single'" ng-required="true" />Single</label>
</div>
<div class="form-group" ng-if="kind=='multi'">
<label class="control-label col-md-2">上傳附檔</label>
<div class="col-md-10">
<input name="files" id="files" type="file" />
</div>
</div>
<div class="form-group" ng-if="kind=='single'">
<label class="control-label col-md-2 requiredstar">上傳附檔</label>
<div class="col-md-10">
<input name="filesingle" id="filesingle" type="file" />
</div>
</div>
<div class="form-group">
<button type="submit">Submit</button>
</div>
</form>
<script src="app.js"></script>
</body>
</html>
// Code goes here
(function(){
'use strict';
angular.module("app",[])
.controller("fileUploadDemoController",["$scope", "$http", "$timeout",
function($scope,$http,$timeout){
$scope.kind="single";
$scope.$watch("kind", function (newValue, oldValue) {
if (newValue == 'multi') {
(function checkFilesElement() {
if ($("#files").length) {
$("#files").kendoUpload();
} else {
$timeout(checkFilesElement, 100);
}
})();
}else if (newValue == 'single') {
(function checkFilesingleElement() {
if ($("#filesingle").length) {
$("#filesingle").kendoUpload({ "multiple": false });
} else {
$timeout(checkFilesingleElement, 100);
}
})();
}
});
function isHasFile() {
var inputElements2 = angular.element(document.querySelectorAll("[name='filesingle'][tabindex='-1']"));
var count = 0;
angular.forEach(inputElements2, function (elm) {
for (var i in elm.files) {
count++;
}
});
return count > 0;
}
function cancelUpload(id) {
if (id) {
//if an id is passed as a param, only reset the element's child upload controls (in case many upload widgets exist)
$("#" + id + " .k-upload-files").remove();
$("#" + id + " .k-upload-status").remove();
$("#" + id + " .k-upload.k-header").addClass("k-upload-empty");
$("#" + id + " .k-upload-button").removeClass("k-state-focused");
} else {
//reset all the upload things!
$(".k-upload-files").remove();
$(".k-upload-status").remove();
$(".k-upload.k-header").addClass("k-upload-empty");
$(".k-upload-button").removeClass("k-state-focused");
}
}
$scope.submit=function($event){
$scope.hasFile = true;
if ($scope.kind === 'single') {
$scope.hasFile = isHasFile();
}
if ($scope.hasFile === false) {
$event.preventDefault();
return false;
}
var formData = new FormData();
for (var key in $scope.model) {
formData.append(key, $scope.model[key]);
}
if ($scope.kind === 'multi') {
var inputElements1 = angular.element(document.querySelectorAll("[name='files'][tabindex='-1']"));
angular.forEach(inputElements1, function (elm) {
for (var i in elm.files) {
formData.append("files", elm.files[i]);
}
});
} else if ($scope.kind === 'single') {
var inputElements2 = angular.element(document.querySelectorAll("[name='filesingle'][tabindex='-1']"));
angular.forEach(inputElements2, function (elm) {
for (var i in elm.files) {
formData.append("files", elm.files[i]);
}
});
}
//post to asp.net FileController/UploadAction
$http({
method: "POST",
url: "/file/upload",
headers: { "Content-Type": undefined },
transformRequest: angular.identity,
data: formData
}).success(function (data) {
//Save Success
}).error(function (res) {
cancelUpload("files");
cancelUpload("filesingle");
alert("failed");
});
};
}]);
angular.bootstrap(document,["app"]);
})();
/* Styles go here */