The type of this JavaScript effect can be seen on many upload-allowance sites, such as Youtube, Flickr, ImageShack, Picasa, etc. That's your visitors can upload files through this JavaScript code, aft...
detail at
JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: CSS below for styling thescript, place it into HEAD section
CSS
Code:
<style type="text/css">
/*
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
#imageUpload input {
display: block;
}
</style>
Step 2: Place JavaScript below in your HEAD section
JavaScript
Code:
<script type="text/javascript">
// Created by: Jeroen Haan | http://www.haan.net
// This script downloaded from JavaScriptBank.com
function fileFields() {
var x = document.getElementById('imageUpload');
x.onclick = function() {
var i = parseFloat(this.lastChild.id)+1;
input = document.createElement("input");
input.setAttribute("type", "file");
input.setAttribute("name", 'imageName_' + i);
input.setAttribute("id", i);
this.appendChild(input);
}
}
// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
fileFields();
});
</script>
Step 3: Place HTML below in your BODY section
HTML
Code:
<a href="#" id="imageUpload"><input type="file" name="imageName_1" id="1" /></a>