Created
October 25, 2015 13:07
-
-
Save tomoTaka01/d2823a86ed2f149b58b5 to your computer and use it in GitHub Desktop.
File upload sample(originally here https://developer.mozilla.org/en/docs/Using_files_from_web_applications)
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> | |
<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.ファイル情報の取得</h3> | |
<div class="input-group"> | |
<input type="file" multiple="multiple" id="inputFile"> | |
</div> | |
<h3>2.ファイルインプットを表示しない</h3> | |
<div class="input-group"> | |
<input type="file" multiple="multiple" id="fileInput" | |
accept="text/csv" style="display:none;" > | |
<a href="#" id="fileSelect">csvファイルを選択(複数ファイル可能)</a> | |
</div> | |
<h3>3.ドラッグ&ドロップ</h3> | |
<div class="input-group"> | |
<div id="dropbox" class="text-center bg-warning" | |
style="border: darkcyan solid thin;">ここにアップするファイルをドラッグ</div> | |
</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 class="col-md-3"> | |
<h3>画像サムネイル</h3> | |
<div id="preview"></div> | |
</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/filesample.js"></script> | |
</body> | |
</html> |
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
'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); | |
} | |
}; | |
// 画像サムネイルを表示 | |
var createThumbnail = function(files){ | |
var imageType = /^image\//; | |
var preview = document.getElementById('preview'); | |
// imgをクリア | |
preview.textContent = null; | |
var len = files.length; | |
for (var i=0;i<len;i++){ | |
var file = files[i]; | |
if (!imageType.test(file.type)){ | |
continue; | |
} | |
// イメージ作成&読込みして表示 | |
var a = document.createElement('a'); | |
a.classList.add('thumbnail'); | |
preview.appendChild(a); | |
var img = document.createElement('img'); | |
img.classList.add('obj'); | |
img.file = file; | |
a.appendChild(img); | |
var reader = new FileReader(); | |
reader.onload = (function(aImg){ | |
return function(e){aImg.src = e.target.result;}; | |
})(img); | |
reader.readAsDataURL(file); | |
} | |
}; | |
// 1.ファイル情報の取得 | |
var inpueFileEle = document.getElementById('inputFile'); | |
inpueFileEle.addEventListener('change', function(){ | |
displayFileInfo(this.files); | |
createThumbnail(this.files); | |
}); | |
// 2.ファイルインプットを表示しない | |
var fileInEle = document.getElementById('fileInput'); | |
fileInEle.addEventListener('change', function(){ | |
displayFileInfo(this.files); | |
createThumbnail(this.files); | |
}, false); | |
var fileSelEle = document.getElementById('fileSelect'); | |
fileSelEle.addEventListener('click', function(e){ | |
fileInEle.click(); | |
e.preventDefault(); | |
}, false); | |
// 3.ドラッグ&ドロップ | |
var dropbox = document.getElementById('dropbox'); | |
dropbox.addEventListener('dragenter', function(e){ | |
e.stopPropagation(); | |
e.preventDefault(); | |
}, false); | |
dropbox.addEventListener('dragover', function(e){ | |
e.stopPropagation(); | |
e.preventDefault(); | |
}, false); | |
dropbox.addEventListener('drop', function(e){ | |
e.stopPropagation(); | |
e.preventDefault(); | |
var dt = e.dataTransfer; | |
var files = dt.files; | |
displayFileInfo(files); | |
createThumbnail(files); | |
}, false); | |
}()); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment