Click to See Complete Forum and Search --> : Looking for a particular script
Deanna475
03-19-2003, 11:03 PM
Hello all. I am looking for a JavaScript that will allow a visitor to "paste or upload" a background image from their hard drive into a layer on my web page.
I've gotten as far as determining that to "upload" a graphic from one's hard drive into a web page involves:
<INPUT NAME="fileUp" TYPE="file" SIZE=12 onClick="SomeFunction()">
But I'm stuck after that!! Has anyone used such a script or can point me in the direction of where to find one on the web? Something I can perhaps modify to suit my purpose? Any and all assistance is appreciated.
D.
PS: There is a similar script at JavaScript Source however the "browse..." and upload function do not work.
http://javascript.internet.com/miscellaneous/color-cube.html
And the author's web site (as mentioned in the credit) has gone 404.
First you cannot allow an upload with JavaScript. To upload from the hard-drive to the server you must have a server-side language to upload it. Now if you want to just hold their image in memory and put it on a layer or <DIV> tag that is probably possible. Is that what you want?
Deanna475
03-19-2003, 11:28 PM
Hi Jona and yes!! I want the user to be able to upload or "paste" a graphic from their hard drive temporarily. Imagine, if you will, a page colourizer or page composer. You can play with all of the elements on the page and change the background colour from several palettes or choose a background image from the library of pre-selected graphics. You can change the font colour, size and family of the font, bold and/or italicize the "sample" text, etc. You can choose between different layouts (3-frame set up, 2 frames, etc.).
But to make this page composer truly effective and to really give a user an excellent idea of what their page can look like before they even copy the source code, I thought it prudent that the user should be able to "paste"/upload their own background graphic into the layer identified as "canvas".
The basis of my code thus far looks something like this:
function change(col){
for(i=0;i<document.f1.r1.length;i++){
if(document.f1.r1[i].checked){
switch (document.f1.r1[i].value) {
case "background" :
document.getElementById("canvas").style.backgroundColor=col
break;case "arial" :
document.getElementById("ofont").style.color=col
break;case "head1" :
document.getElementById("oh1").style.color=col
break;case "base" :
document.getElementById("canvasbar").style.scrollbarBaseColor=col
break;
default :
alert("Please select an option")
}
}
}
}
function change_text(txt){document.getElementById("canvas").style.fontFamily=txt}
function change_bold(bold){document.getElementById("canvas").style.fontWeight=bold}
function change_italic(italic){document.getElementById("canvas").style.fontStyle=italic}
function col_to_num(col_val){document.f1.colours_num.value=col_val}
// -->
That's the Reader's Digest version!! Lots snipped out to save space but hopefully enough to give you an idea of how my page functions. In other words, like the example I mentioned in my first message above, I'm not using the document.write method of making my page interactive.
Do you know of such a script, Jona?
D.
Well, I don't know of one, but I can make one. :)
<html><head><title>Calculator</title>
<script>
function changeBG(){
document.body.background=document.frm.f1.value
}
</script>
</head><body>
<form name="frm">
<input type=file name="f1">
<input type=button onclick="changeBG()" value="Change BG">
</form>
<div id="a1">
</div>
</body></html>
There you go. :)
Deanna475
03-19-2003, 11:41 PM
Holy Hannah!! That was fast!! And you're good!! I'll give it a whirl right now and see how it goes. It doesn't look as complicated as I thought it would be. I'll try it now and let you know if we have success. And thank you *so* much!! And I'm sure the end-user thanks you too. :)
I always try to keep things the simplest possible. Although no matter how simple I try they many times end up very complex. Well, glad I could help! :)