Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
FileAPIを用いて、ファイルを選択またはドラッグ&ドロップで画像を選択し、width,height、選択した画像とDataURLを表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>FileAPI で画像を選択またはドラッグ&ドロップし、表示</title>
<style>
html, body {
font-size: 20px;
text-align: center;
}
div#drop-zone {
margin: 1rem auto;
width: 20rem;
height: 10rem;
border: 1px solid #333;
}
div#print_image {
margin: 1rem auto;
}
textarea {
width: 100%;
height: 10rem;
margin: 1rem auto;
}
</style>
</head>
<body>
<h1>FileAPI で画像を選択またはドラッグ&ドロップし、表示</h1>
<p>画像を選択!</p>
<input type="file" id="file-image" accept="image/*">
<p>or</p>
<div id="drop-zone">ここにドロップ!</div>
<div id="print_img">
<p id="width-height">width: height: </p>
<p>↓以下に画像を表示</p>
<img id="image" alt="">
<p>↓以下にdataURLを表示</p>
<textarea name="name" id="print_DataURL" readonly></textarea>
</div>
<script>
(function() {
/*
http://www.html5rocks.com/ja/tutorials/file/dndfiles/
http://www.pori2.net/html5/File/040.html
*/
var print_img_id = 'print_img';
var print_DataURL_id = 'print_DataURL';
if (checkFileApi()){
//ファイル選択
var file_image = document.getElementById('file-image');
file_image.addEventListener('change', selectReadfile, false);
//ドラッグオンドロップ
var dropZone = document.getElementById('drop-zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleDragDropFile, false);
}
// FileAPIに対応しているか
function checkFileApi() {
// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
// Great success! All the File APIs are supported.
return true;
}
alert('The File APIs are not fully supported in this browser.');
return false;
}
//ファイルが選択されたら読み込む
function selectReadfile(e) {
var file = e.target.files;
var reader = new FileReader();
//dataURL形式でファイルを読み込む
reader.readAsDataURL(file[0]);
//ファイルの読込が終了した時の処理
reader.onload = function(){
readImage(reader, print_img_id, print_DataURL_id);
}
}
//ドラッグオンドロップ
function handleDragOver(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}
function handleDragDropFile(e) {
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files; // FileList object.
var file = files[0];
var reader = new FileReader();
//dataURL形式でファイルを読み込む
reader.readAsDataURL(file);
//ファイルの読込が終了した時の処理
reader.onload = function(){
readImage(reader, print_img_id, print_DataURL_id);
}
}
//ファイルの読込が終了した時の処理
function readImage(reader, print_image_id, print_DataURL_id ){
//ファイル読み取り後の処理
var result_DataURL = reader.result;
//読み込んだ画像とdataURLを書き出す
var img = document.getElementById('image');
var src = document.createAttribute('src');
src.value = result_DataURL;
img.setAttributeNode(src);
document.getElementById(print_DataURL_id).value = result_DataURL;
printWidthHeight('image', 'width-height');
}
//width, height表示
function printWidthHeight( img_id, width_height_id ) {
var img = document.getElementById(img_id);
var w = img.naturalWidth;
var h = img.naturalHeight;
document.getElementById(width_height_id).innerHTML = 'width:' + w + ' height:' + h;
}
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment