tomoTaka01/filesample2.html

## filesample2.html
<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <title>file upload sample</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="js/vender/bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet">
    </head>
    <body>
        <h1>file upload sample</h1>
        <div class="container">
            <div class="row">
                <div class="col-md-5">
                    <h3>1.JavaScriptで実装</h3>
                    <div class="input-group">
                        <input type="file" multiple="multiple" id="fileIn1"
                               accept="text/csv" style="display:none;" />
                        <a href="#" id="fileSel1" class="btn btn-info">csvファイルを選択（複数ファイル可能）</a>
                        <p id="fileCnt1"></p>
                    </div>
                    <h3>2. AngularJsを使用</h3>
                    <div class="input-group" ng-controller="myCtrl">
                        <label for="fileIn2" class="btn btn-success">csvファイルを選択（複数ファイル可能）</label>
                        <input type="file" multiple="multiple" id="fileIn2"
                               accept="text/csv" style="display:none;"
                               onchange="angular.element(this).scope().fileChanged(this)"/>
                        <p>{{fileCnt2}}</p>
                    </div>
                </div>
                <div class ="col-md-4">
                    <h3>アップしたファイル情報</h3>
                    <table class="table-bordered table-striped">
                        <thead class="bg-primary">
                            <tr>
                                <th>ファイル名</th>
                                <th>ファイルサイズ</th>
                                <th>ファイルタイプ</th>
                            </tr>
                        </thead>
                        <tbody id="fileInfo">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <script src="js/vender/jquery-1.11.3.min.js"></script>
        <script src="js/vender/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
        <script src="js/vender/angular.min.js"></script>
        <script src="js/filesample2.js"></script>
    </body>
</html>

## filesample2.js
'use strict';
(function(){
    // アップしたファイル情報をテーブルに表示
    var displayFileInfo = function(files){
       var fileInfo = document.getElementById('fileInfo');
       // tbodyをクリア
       fileInfo.textContent = null;
       var len = files.length;
       for (var i=0;i<len;i++){
           var file = files[i];
           var tbodyEle = '<tr>'
                   + '<td>' + file.name + '</td>'
                   + '<td>' + file.size + '</td>'
                   + '<td>' + file.type + '</td>'
                   + '</tr>';
           fileInfo.insertAdjacentHTML('beforeend', tbodyEle);
       }
    };
    // 1.JavaScriptで実装
    var fileIn1Ele = document.getElementById('fileIn1');
    fileIn1Ele.addEventListener('change', function(){
         displayFileInfo(this.files);
         var cnt = document.getElementById('fileCnt1');
         cnt.innerHTML = 'ファイル選択数=' + this.files.length;
    }, false);
    var fileSel1Ele = document.getElementById('fileSel1');
    fileSel1Ele.addEventListener('click', function(e){
        fileIn1Ele.click();
        e.preventDefault();
    }, false);
    // 2.AngularJsを使用
    var myApp = angular.module('myApp',[]);
    myApp.controller('myCtrl',['$scope', function($scope){
        $scope.fileChanged = function(file){
            displayFileInfo(file.files);
            $scope.fileCnt2 = 'ファイル選択数=' + file.files.length;
            $scope.$apply(); // ここで画面の$scopeが適用
        };
    }]);
}());
	<!DOCTYPE html>
	<html ng-app="myApp">
	<head>
	<title>file upload sample</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="js/vender/bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet">
	</head>
	<body>
	<h1>file upload sample</h1>
	<div class="container">
	<div class="row">
	<div class="col-md-5">
	<h3>1.JavaScriptで実装</h3>
	<div class="input-group">
	<input type="file" multiple="multiple" id="fileIn1"
	accept="text/csv" style="display:none;" />
	<a href="#" id="fileSel1" class="btn btn-info">csvファイルを選択（複数ファイル可能）</a>
	<p id="fileCnt1"></p>
	</div>
	<h3>2. AngularJsを使用</h3>
	<div class="input-group" ng-controller="myCtrl">
	<label for="fileIn2" class="btn btn-success">csvファイルを選択（複数ファイル可能）</label>
	<input type="file" multiple="multiple" id="fileIn2"
	accept="text/csv" style="display:none;"
	onchange="angular.element(this).scope().fileChanged(this)"/>
	<p>{{fileCnt2}}</p>
	</div>
	</div>
	<div class ="col-md-4">
	<h3>アップしたファイル情報</h3>
	<table class="table-bordered table-striped">
	<thead class="bg-primary">
	<tr>
	<th>ファイル名</th>
	<th>ファイルサイズ</th>
	<th>ファイルタイプ</th>
	</tr>
	</thead>
	<tbody id="fileInfo">
	</tbody>
	</table>
	</div>
	</div>
	</div>
	<script src="js/vender/jquery-1.11.3.min.js"></script>
	<script src="js/vender/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
	<script src="js/vender/angular.min.js"></script>
	<script src="js/filesample2.js"></script>
	</body>
	</html>
	'use strict';
	(function(){
	// アップしたファイル情報をテーブルに表示
	var displayFileInfo = function(files){
	var fileInfo = document.getElementById('fileInfo');
	// tbodyをクリア
	fileInfo.textContent = null;
	var len = files.length;
	for (var i=0;i<len;i++){
	var file = files[i];
	var tbodyEle = '<tr>'
	+ '<td>' + file.name + '</td>'
	+ '<td>' + file.size + '</td>'
	+ '<td>' + file.type + '</td>'
	+ '</tr>';
	fileInfo.insertAdjacentHTML('beforeend', tbodyEle);
	}
	};
	// 1.JavaScriptで実装
	var fileIn1Ele = document.getElementById('fileIn1');
	fileIn1Ele.addEventListener('change', function(){
	displayFileInfo(this.files);
	var cnt = document.getElementById('fileCnt1');
	cnt.innerHTML = 'ファイル選択数=' + this.files.length;
	}, false);
	var fileSel1Ele = document.getElementById('fileSel1');
	fileSel1Ele.addEventListener('click', function(e){
	fileIn1Ele.click();
	e.preventDefault();
	}, false);
	// 2.AngularJsを使用
	var myApp = angular.module('myApp',[]);
	myApp.controller('myCtrl',['$scope', function($scope){
	$scope.fileChanged = function(file){
	displayFileInfo(file.files);
	$scope.fileCnt2 = 'ファイル選択数=' + file.files.length;
	$scope.$apply(); // ここで画面の$scopeが適用
	};
	}]);
	}());