Last active
August 29, 2015 14:11
-
-
Save kzkamiya/3b2dbd9ba7fd566da494 to your computer and use it in GitHub Desktop.
Angular File Upload
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <!-- | |
| https://bl.ocks.org/kzkamiya/raw/3b2dbd9ba7fd566da494/ | |
| --> | |
| <meta chraset="UTF-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1.0"> | |
| <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> | |
| <title>file upload</title> | |
| </head> | |
| <body> | |
| <style> | |
| /*-----------------------------------------------------------------------------------*/ | |
| /* | |
| /* Built with blocs | |
| /*-----------------------------------------------------------------------------------*/ | |
| body{ | |
| margin:0; | |
| padding:0; | |
| background:#FFF; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| a:hover{text-decoration: none;} | |
| /* Globals type styling */ | |
| h1, h2, h3, h4, h5, h6, p, label, .btn, a{ | |
| font-family:"Helvetica"; | |
| } | |
| /* Site container width */ | |
| .container{ | |
| max-width:750px; | |
| } | |
| /* Blocs */ | |
| .bloc{ | |
| width:100%; | |
| background: 50% 50% no-repeat; | |
| -webkit-background-size: cover; | |
| -moz-background-size: cover; | |
| -o-background-size: cover; | |
| background-size: cover; | |
| } | |
| /* Bloc sizes */ | |
| .bloc-sm{ | |
| padding:20px 0; | |
| } | |
| /* Bloc - Light theme */ | |
| .l-bloc{ | |
| color:rgba(0,0,0,.5); | |
| } | |
| .l-bloc button:hover{ | |
| color:rgba(0,0,0,.7); | |
| } | |
| .l-bloc h1,.l-bloc h2,.l-bloc h3,.l-bloc h4,.l-bloc h5, .l-bloc h6, .l-bloc .ico{ | |
| color:rgba(0,0,0,.7); | |
| } | |
| .l-bloc .icon-round{ | |
| border-color:rgba(0,0,0,.7); | |
| } | |
| .l-bloc .divider-h span{ | |
| border-color:rgba(0,0,0,.1); | |
| } | |
| .l-bloc a{ | |
| color:rgba(0,0,0,.6); | |
| } | |
| .l-bloc a:hover{ | |
| color:rgba(0,0,0,1); | |
| } | |
| .l-bloc .navbar-toggle .icon-bar{ | |
| color:rgba(0,0,0,.6); | |
| } | |
| .l-bloc .btn-wire, .l-bloc .btn-wire:hover{ | |
| color:rgba(0,0,0,.7); | |
| border-color:rgba(0,0,0,.3); | |
| } | |
| /* Custom bloc styling */ | |
| #nav-bloc,#body,#bloc-2{ | |
| background-color:#FFF; | |
| } | |
| #bloc-2 p{ | |
| font-size: 8px; | |
| } | |
| /* NavBar */ | |
| .navbar{ | |
| margin-bottom: 0; | |
| } | |
| .navbar-brand{ | |
| height:auto; | |
| padding:15px 15px; | |
| font-size:25px; | |
| font-weight:normal; | |
| font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; | |
| font-weight:600; | |
| } | |
| .navbar-brand img{ | |
| width: auto; | |
| max-height: 200px; | |
| margin: 0 5px 0 0; | |
| } | |
| .navbar-brand{ | |
| padding: 15px 15px; | |
| } | |
| .navbar .nav{ | |
| padding-top: 2px; | |
| margin-right: -16px; | |
| float:right; | |
| } | |
| .nav > li{ | |
| float:left; | |
| margin-top:4px; | |
| font-size:16px; | |
| } | |
| .nav > li a:hover, .nav > li a:focus{ | |
| background:transparent; | |
| } | |
| .navbar-toggle{ | |
| margin: 12px; | |
| border: 0px; | |
| } | |
| .navbar-toggle:hover{ | |
| background:transparent!important; | |
| } | |
| .navbar-toggle .icon-bar{ | |
| background-color: rgba(0,0,0,.5); | |
| width: 26px; | |
| } | |
| @media (min-width: 768px){ | |
| .site-navigation{ | |
| position: absolute; | |
| top: 50%; | |
| right:20px; | |
| transform: translate(0, -50%); | |
| -webkit-transform:translateY(-50%); | |
| } | |
| } | |
| /* Buttons */ | |
| .btn{ | |
| margin: 0 5px 5px 0; | |
| } | |
| .btn.pull-right{ | |
| margin: 0 0 5px 5px; | |
| } | |
| .btn-d,.btn-d:hover,.btn-d:focus{ | |
| color:#FFF!important; | |
| background:rgba(0,0,0,.3); | |
| } | |
| .btn-sq{ | |
| border-radius: 0px; | |
| } | |
| /*Forms*/ | |
| .form-control{ | |
| border-color:rgba(0,0,0,.1); | |
| box-shadow:none; | |
| } | |
| /* Mobile adjustments */ | |
| @media (max-width: 767px) | |
| { | |
| .page-container{ | |
| overflow-x: hidden; | |
| } | |
| .container{ | |
| padding-left:5px!important; | |
| padding-right:5px!important; | |
| } | |
| .bloc{ | |
| text-align: center; | |
| -webkit-background-size: auto 200%; | |
| -moz-background-size: auto 200%; | |
| -o-background-size: auto 200%; | |
| background-size: auto 200%; | |
| } | |
| .navbar .nav{ | |
| padding-top: 0; | |
| border-top:1px solid rgba(0,0,0,.2); | |
| float:none!important; | |
| } | |
| .site-navigation{ | |
| position:inherit; | |
| transform:none; | |
| -webkit-transform:none; | |
| -ms-transform:none; | |
| } | |
| .nav > li{ | |
| margin-top: 0; | |
| border-bottom:1px solid rgba(0,0,0,.1); | |
| background:rgba(0,0,0,.05); | |
| text-align: left; | |
| width:100%; | |
| } | |
| .nav > li:hover{ | |
| background:rgba(0,0,0,.08); | |
| } | |
| .navbar-collapse{ | |
| padding:0; | |
| -webkit-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| .navbar-brand img{ | |
| max-height: 40px; | |
| margin: -10px 5px 0 0; | |
| } | |
| .btn.pull-left, .btn.pull-right{ | |
| float:none!important; | |
| } | |
| .bloc-xl,.bloc-lg{ | |
| padding: 40px 0; | |
| } | |
| .a-block{ | |
| text-align: center; | |
| } | |
| .btn-dwn{ | |
| display:none; | |
| } | |
| } | |
| </style> | |
| <style> | |
| ::-webkit-input-placeholder { | |
| color: #ccc !important; | |
| } | |
| :-moz-placeholder { | |
| color: #ccc !important; | |
| } | |
| :-ms-placeholder { | |
| color: #ccc !important; | |
| } | |
| </style> | |
| <title>File Upload</title> | |
| </head> | |
| <body> | |
| <!-- Main container --> | |
| <div class="page-container"> | |
| <!-- Navigation Bloc --> | |
| <div class="bloc l-bloc " id="nav-bloc"> | |
| <div class="container bloc-sm"> | |
| <nav class="navbar row"> | |
| <div class="navbar-header"> | |
| <a class="navbar-brand" href="./regist">File upload</a> | |
| <button id="nav-toggle" type="button" class="ui-navbar-toggle navbar-toggle" data-toggle="collapse" data-target=".navbar-1"> | |
| <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> | |
| </button> | |
| </div> | |
| <div class="collapse navbar-collapse navbar-1"> | |
| <ul class="site-navigation nav"> | |
| </ul> | |
| </div> | |
| </nav> | |
| </div> | |
| </div> | |
| <!-- Navigation Bloc END --> | |
| <!-- body --> | |
| <div class="bloc l-bloc " id="body" ng-app="fileUploadApp"> | |
| <div class="container bloc-sm" ng-controller="fileUploadCtrl"> | |
| <!-- mask --> | |
| <style> | |
| .mask { | |
| background-color: black; | |
| filter: alpha(opacity=25); | |
| opacity: 0.25; | |
| z-index: 1; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| text-align: center; | |
| padding-top: 10%; | |
| font-size: 3em; | |
| color: white; | |
| } | |
| </style> | |
| <div ng-show="loading" ng-bind="loading_message" ng-style="loading_style" class="mask"></div> | |
| <div class="row"> | |
| <div class="col-sm-12"> | |
| <div class="form-group"> | |
| <label> | |
| Zip File | |
| </label> | |
| <input type="file" file-model="zipFile" /> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| API Key | |
| </label> | |
| <input class="form-control" placeholder="changeit" maxlength="34" ng-model="contents.api_key"/> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| lcm_system_id | |
| </label> | |
| <input class="form-control" placeholder="SBU" maxlength="10" ng-model="contents.lcm_system_id"/> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| user_id | |
| </label> | |
| <input class="form-control" ng-model="contents.user_id" /> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| contents_id | |
| </label> | |
| <input class="form-control" ng-model="contents.contents_id"/> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| scorm_lo_title | |
| </label> | |
| <input class="form-control" ng-model="scorm_lo_title"/> | |
| </div> | |
| <div class="text-center"> | |
| <a href="#" class="btn btn-d btn-sq btn-sm" type="submit" ng-click="uploadFile()">Upload</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- body END --> | |
| <!-- Footer - bloc-2 --> | |
| <div class="bloc l-bloc " id="bloc-2"> | |
| <div class="container bloc-sm"> | |
| <div class="row"> | |
| <div class="col-sm-12"> | |
| <p class="text-center "> | |
| COPYRIGHT © XXX. ALL RIGHTS RESERVED. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer - bloc-2 END --> | |
| </div> | |
| <!-- Main container END --> | |
| <!-- Angular --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script> | |
| <script> | |
| var fileUploadApp = angular.module('fileUploadApp', []); | |
| fileUploadApp.directive('fileModel', ['$parse', function ($parse) { | |
| return { | |
| restrict: 'A', | |
| link: function(scope, element, attrs) { | |
| var model = $parse(attrs.fileModel); | |
| var modelSetter = model.assign; | |
| element.bind('change', function(){ | |
| scope.$apply(function(){ | |
| modelSetter(scope, element[0].files[0]); | |
| }); | |
| }); | |
| } | |
| }; | |
| }]); | |
| fileUploadApp.service('fileUpload', ['$http', function ($http) { | |
| this.uploadFileToUrl = function(file, contents, uploadUrl, callback){ | |
| var fd = new FormData(); | |
| fd.append('file', file); | |
| fd.append('api_key', contents.api_key); | |
| fd.append('lcm_system_id', contents.lcm_system_id); | |
| fd.append('user_id', contents.user_id); | |
| fd.append('contents_id', contents.contents_id); | |
| fd.append('scorm_lo_title', contents.scorm_lo_title); | |
| fd.append('ccp_content_id', contents.ccp_content_id); | |
| $http.post(uploadUrl, fd, { | |
| transformRequest: angular.identity, | |
| headers: {'Content-Type': undefined} | |
| }) | |
| .success(function(){ | |
| if(callback) callback(); | |
| }) | |
| .error(function(){ | |
| if(callback) callback(); | |
| }); | |
| } | |
| }]); | |
| fileUploadApp.controller('fileUploadCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){ | |
| $scope.uploadFile = function(){ | |
| var file = $scope.zipFile; | |
| console.log('file is ' + file); | |
| var uploadUrl = location.href; | |
| console.log('uploadUrl is ' + uploadUrl); | |
| var contents = $scope.contents; | |
| console.log('contents is ' + contents); | |
| $scope.loading = true; | |
| $scope.loading_message = "Uploading..."; | |
| var width = document.documentElement.scrollWidth || document.body.scrollWidth; | |
| var height = document.documentElement.scrollHeight || document.body.scrollHeight; | |
| console.log("width = " + width + ",height = " + height); | |
| $scope.loading_styel = "width: " + width + "px; height: " + height + "px;"; | |
| fileUpload.uploadFileToUrl(file, contents, uploadUrl, function(){$scope.loading = false; alert('OK');}); | |
| }; | |
| }]); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
这写的是？