I found this script online somewhere (I can't remember where) and it works well, for displaying the preview of an image before it's uploaded. The preview script is intended for multiple files but since I'm also saving data to a database, I need to restrict it to a single file. This script includes a loop that indexes the name of the file input and I'm having trouble targeting it with my php script that uploads the file and saves the data. So, I need to remove the loop so it works with only a single file, then I can give it a "regular" name and target it.
<input type="file" name="files[]" class="file" id="files">
<output id="list"></output>
<script type="text/javascript">
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
Thanks!