Created
December 17, 2012 14:22
-
-
Save meritt/4318628 to your computer and use it in GitHub Desktop.
Examples of code for article «Improve the user experience of work with web forms»
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
var file = document.querySelector('[type=file]'); | |
var dropzone = document.querySelector('.wrapper'); | |
file.addEventListener('change', function() { | |
previewImages(this.files); | |
this.value = ''; | |
}, false); | |
dropzone.addEventListener('dragover', function(event) { | |
event.preventDefault(); | |
dropzone.classList.add('active'); | |
event.dataTransfer.dropEffect = 'copy'; | |
}, false); | |
dropzone.addEventListener('drop', function(event) { | |
event.preventDefault(); | |
dropzone.classList.remove('active'); | |
previewImages(event.dataTransfer.files); | |
}, false); |
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
var data = new FormData(form); | |
queue.forEach(function(element) { | |
data.append('image', element.file); | |
}); |
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
document.querySelector('[type=file]').addEventListener('change', function() { | |
[].forEach.call(this.files, function(file) { | |
if (file.type.match(/image.*/)) { | |
var reader = new FileReader(); | |
reader.onload = function(event) { | |
var img = document.createElement('img'); | |
img.src = event.target.result; | |
div.appendChild(img); | |
queue.push({file: file, element: img}); | |
}; | |
reader.readAsDataURL(file); | |
} | |
}); | |
}, false); |
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
submit.disabled = !form.checkValidity(); |
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
form.onsubmit = function(event) { | |
if (window.FormData) { | |
event.preventDefault(); | |
var data = new FormData(form); | |
var xhr = new XMLHttpRequest(); | |
var url = form.getAttribute('action') + '?time=' + (new Date()).getTime(); | |
xhr.open('post', url); | |
xhr.onreadystatechange = function() { | |
if (xhr.readyState == 4 && xhr.status == 200) { | |
// server response: xhr.responseText | |
} | |
}; | |
xhr.send(data); | |
} | |
}; |
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
<input type="file" name="image" accept="image/*" multiple> |
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
if (window.localStorage) { | |
var elements = document.querySelectorAll('[name]'); | |
for (var i = 0, length = elements.length; i < length; i++) { | |
(function(element) { | |
var name = element.getAttribute('name'); | |
element.value = localStorage.getItem(name) || ''; | |
element.onkeyup = function() { | |
localStorage.setItem(name, element.value); | |
}; | |
})(elements[i]); | |
} | |
} |
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
function previewImages(files) { | |
[].forEach.call(files, function(file) { | |
if (file.type.match(/image.*/)) { | |
var reader = new FileReader(); | |
reader.onload = function(event) { | |
var img = document.createElement('img'); | |
img.src = event.target.result; | |
div.appendChild(img); | |
queue.push({file: file, element: img}); | |
}; | |
reader.readAsDataURL(file); | |
} | |
}); | |
} |
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
var xhr = new XMLHttpRequest(); | |
xhr.open(method, url); | |
xhr.responseType = 'json'; | |
xhr.onreadystatechange = function() { | |
if (xhr.readyState == 4 && xhr.status == 200) { | |
// server response: xhr.response | |
} | |
}; | |
xhr.send(); |
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
var xhr = new XMLHttpRequest(); | |
xhr.upload.addEventListener('progress', function(event) { | |
if (event.lengthComputable) { | |
progress.value = Math.round((event.loaded * 100) / event.total); | |
} | |
}, false); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Examples of code for article «Improve the user experience of work with web forms» — http://simonenko.su/38146501854/improving-ux-for-web-form