<head>
<meta charset="utf-8">
<title>Html5 local file api tut</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.3/css/foundation.min.css" rel="stylesheet" />
</head>
<div class="container">
<div class="row" >
<!--фото демо-->
<div class="large-12 columns" >
<h1>Load A Photo</h1>
<input type="file" id="the-photo-file-field">
<div id="preview" >
<!--зображення буде вставлено сюди-->
</div>
<div id="data" class="large-8 columns">
<h2 id="name"></h2>
<p id="size"></p>
<p id="type"></p>
</div>
</div>
<!--відео демо-->
<div class="large-12 columns">
<h1>Load An mp4 file</h1>
<input type="file" id="the-video-file-field">
<div id="data-vid" class="large-8 columns">
<!--відео буде вставлено тут-->
</div>
<h2 id="name-vid"></h2>
<p id="size-vid"></p>
<p id="type-vid"></p>
</div>
</div>
</div>
</div>
<!--
html5 відео
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
-->
//визначаємо чи підтримує браузер file api і можливості filereader
if (window.File && window.FileReader && window.FileList && window.Blob) {
//http://stackoverflow.com/questions/10420352/converting-file-size-in-bytes-to-human-readable
function humanFileSize(bytes, si) {
var thresh = si ? 1000 : 1024;
if(bytes < thresh) return bytes + ' B';
var units = si ? ['kB','MB','GB','TB','PB','EB','ZB','YB'] : ['KiB','MiB','GiB','TiB','PiB','EiB','ZiB','YiB'];
var u = -1;
do {
bytes /= thresh;
++u;
} while(bytes >= thresh);
return bytes.toFixed(1)+' '+units[u];
}
//ця функція викликається, коли вхідне зображення завантажується
function renderImage(file){
var reader = new FileReader();
reader.onload = function(event){
the_url = event.target.result
//звичайно, використовувати бібліотеку шаблонів, таку як handlebars.js, це краще рішення, ніж просто вставляти рядок
$('#preview').html("<img src='"+the_url+"' />")
$('#name').html(file.name)
$('#size').html(humanFileSize(file.size, "MB"))
$('#type').html(file.type)
}
//коли файл читається, вище спрацьовує подія onload
reader.readAsDataURL(file);
}
//ця функція викликається, коли input завантажує відео
function renderVideo(file){
var reader = new FileReader();
reader.onload = function(event){
the_url = event.target.result
//звичайно, використовувати бібліотеку шаблонів, таку як handlebars.js, це краще рішення, ніж просто вставляти рядок
$('#data-vid').html("<video width='400' controls><source id='vid-source' src='"+the_url+"' type='video/mp4'></video>")
$('#name-vid').html(file.name)
$('#size-vid').html(humanFileSize(file.size, "MB"))
$('#type-vid').html(file.type)
}
//коли файл читається, вище спрацьовує подія onload
reader.readAsDataURL(file);
}
//відсліжуємо зміни
$( "#the-photo-file-field" ).change(function() {
console.log("photo file has been chosen")
//отримуємо перше зображення з fileList
//у цьому прикладі ми завантажуємо тільки один файл
console.log(this.files[0].size)
renderImage(this.files[0])
});
$( "#the-video-file-field" ).change(function() {
console.log("video file has been chosen")
//отримуємо перше зображення з fileList
//у цьому прикладі ми завантажуємо тільки один файл
console.log(this.files[0].size)
renderVideo(this.files[0])
});
} else {
alert('File API підтримується в цьому браузері тільки частково');
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.