Тесты для полей формы

by Евгений

HTML

<div class="section">
    <label>Мультивыбор файлов</label>
    <input id="filefield" type="file" multiple />
</div>

<div class="section">
    <label>Формат даты</label>
    <input type="date" id="datefield" />
</div>

<div class="section">
    <label>ajax загрузка файлов (требуется серверный обработчик). <a href="http://learn.javascript.ru/xhr-onprogress" target="_blank">Отсюда</a></label>
    <form name="upload">
        <input type="file" name="file1">
        <input type="submit" value="Загрузить">
    </form>
</div>
      
<div class="section">
    <button id="isFlash">Есть ли флеш</button>
</div>
<div id="log">результаты</div>
        <div class="section">
            <label>Всякое</label>
    <input type="file" id="ctrl" webkitdirectory directory multiple/>
            <input type="file" name="photo" accept="image/*" capture="camera">
        </div>

CSS

.section {
    margin: 30px 10px;
    border: 1px solid #ccc;
    padding: 20px;
}
label {
    display: block;
    margin-bottom: 10px;
    color: #333;
    font-weight: bold;
}
#log {
    color: orange;
    font-size: 20px;
    margin: 20px 10px;
}

JavaScript

document.querySelector("#filefield").onchange = function() {
    var arr = [];
    for(var i = 0; i < this.files.length; i++) {
        arr.push('<br>file #' + (i + 1) + ':');
        var file = this.files[i];
        for( var key in file ) {
            arr.push(key + ': ' + file[key]);
        }
    };
    log(arr.join('<br>'));
}

document.querySelector("#datefield").onchange = function() {
    var temp = this.value.split('-');
    var out;
    if (temp.length == 3) {
        out = temp[2] + '.' + temp[1] + '.' + temp[0];
    }
    log(out);
}
document.querySelector("#isFlash").onclick = function() {
    log(navigator.plugins["Shockwave Flash"] ? 'есть флеш' : 'нет флеша')
}

function log(html) {
  document.getElementById('log').innerHTML = html;
}
function onSuccess() {
  log('success');
}
function onError() {
  log('error');
}
function onProgress(loaded, total) {
  log(loaded + ' / '+ total);
}
var form = document.forms.upload;
form.onsubmit = function() {
  var file = this.elements.file1.files[0];  
  if (file) upload(file, onSuccess, onError, onProgress);  
  return false;
}
function upload(file, onSuccess, onError, onProgress) {
  var xhr = new XMLHttpRequest();
  xhr.onload = xhr.onerror = function() {
    if(this.status != 200 || this.responseText != 'OK') {
      onError(this);
      return;
    }
    onSuccess();
  };
  xhr.upload.onprogress = function(event) {
    onProgress(event.loaded, event.total);
  }
  xhr.open("POST", "upload.php", true); 
  xhr.send(file);
}