I’ve seen a couple examples online that do this using one file input element, but none that show you a preview / thumbnail of the image as each one is uploaded. Anyone know how this might be done or have some code to share that can do this? Do the images need to be uploaded to the server before a thumbnail can be displayed? And, can this be done without the page reloading?
One trick I’ve used is to have an <img> located near the file upload form element. Then I trigger a javascript function after the user has found a file:
function fileChanged(formValue) {
document.getElementById("imageElement").src = "file:///" + encodeURI(formValue);
}
I’d love to see the rest of the code you have.
This is a nice feature. Do you make the image a thumbnail by setting the width and height in the javascript?
I’m working on a gallery script. One thing I’m going to attempt is to allow drap and drop reordering of pictures in the users gallery.
http://tool-man.org/examples/sorting.html
The above link has Javascript to sort <li> elements via drag and drop. I imagine that it could be adapted to work with <img> elements. So that’s what I’m going to try to do.
After the user reorders the elements one can easily get the order by iterating through the elements (or so I’ve read 
).
This is by no means complete - it’s just an example of a way you could implement something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Testing</title>
<script type="text/javascript">
function fileChanged(val) {
//assume the value is not an image
var isImage = false;
var msg = "", path = "";
var validImages = ["jpg","gif","png","bmp"];
for (var i = 0, ilength = validImages.length; i < ilength; ++i) {
if (val.indexOf("." + validImages[i]) !== -1) {
isImage = true;
break;
}
}
if (isImage) {
path = "file:///" + encodeURI(val);
msg = val.substr((val.lastIndexOf("\\\\") + 1));
} else {
path = "";
msg = "Not a valid image";
}
document.getElementById("img").src = path;
document.getElementById("info").innerHTML = msg;
}
window.onload = function() {
document.getElementById("image").onchange = function() { fileChanged(this.value); };
};
</script>
</head>
<body>
<form action="" method="get">
<p><input type="file" id="image" name="image"></p>
<p><img src="" id="img" height="150" alt=""><br>
<span id="info"></span>
</p>
</form>
</body>
</html>
Notice I only specified a height attribute for the img - the width will auto-fill with the proper dimensions. You can mess with the code to check for the existing image size, etc to make your thumbnails, too.
Unfortunately that won’t work outside of the “local machine” security zone, as there is no way to determine the file path (the .value property only contains the file name).
Perhaps this effect could be achieved with a combination of Javascript and server side code that uploads the file and displays a thumbnail of it in another frame? What do you think about that? Anyone know of a working example of something like that?
When you use a “file” input type, the value in the text box is the full path - at least in IE and Firefox on Windows XP. Did you try it?
The whole idea is that you technically are in the local machine security zone. The point of the script is to show which image you’re uploading before you upload it - nothing more.
Strange, it does work even when the script is hosted on a remote server, contrary to what microsoft says on this page.
Looks like grabbing the path to a file (and doing whatever you want with it) is not a security issue for IE/FF.
If I were so inclined, I could determine the machine account name for 50% of the people who uploaded images. That doesn’t seem very secure to me.
However for your file preview, it works pretty well.
Check out this example / demo:
That’s exactly what I need to do. All I need to do now is to add a caption (input text box) along with each thumbnail and convert the PHP to Coldfusion.