Topic awaiting preservation: swapping [input type="file"] for a text field and button graphic (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=8962" title="Pages that link to Topic awaiting preservation: swapping [input type=&quot;file&quot;] for a text field and button graphic (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: swapping [input type="file"] for a text field and button graphic <span class="small">(Page 1 of 1)</span>\$

smonkey Paranoid (IV) Inmate From: Northumberland, England Insane since: Apr 2003	posted 11-29-2003 23:50 Hi Guys, I could really use some help with this now, I have written this from scratch which is pretty good for me and it works which is also pretty good for me, but there are a few technically problems I'm having that I can't figure out. Firstly I would like to get the same functionality to work in moz too (it only works in ie at the moment - the attachEvent code and .click() aren't moz compatible). Secondly I was wondering if I'm using 'too much DOM' for a task that could be achieved more simply? Your advice and suggestions would be appreciated, as would the best ways to 'streamline' what I have which I think is a bit on the messy and cumbersome side. And thirdly I was hoping you could suggest the best way to 'hide' the original file browse field when I create the new one. In case you were wondering my aim is to produce a script that will scan for a file upload field in a page and switch it so that the 'browse' button can be an image. The point of using the DOM so much was to avoid putting code in the page since if javascript isn't enabled the file upload field still needs to work albeit with an ugly look. code: <html> <head> <script language="JavaScript" type="text/JavaScript"> function fixUpload() { input = document.getElementsByTagName('INPUT') newInput = document.createElement( 'INPUT' ) newInput.type = 'text' newInput.id = 'newInput' inputBtn = document.createElement( 'INPUT' ) inputBtn.type = 'image' inputBtn.name = 'inputBtn' inputBtn.src = 'myButton.gif' inputBtn.attachEvent('onclick',function(){form[inputName].click()}) for (i=0;i<input.length;i++) { if (input[i].type.toLowerCase()=='file') { inputName=input[i].name inputObj=document.getElementById('newInput') form=input[i].parentNode form.insertBefore(inputBtn,input[i]) form.insertBefore(newInput,inputBtn) input[i].attachEvent('onchange',function(){inputObj.value = form[inputName].value;inputObj.focus()}) } } } window.onload=fixUpload </script> </head> <body> <form name="form1" id="form1" enctype="multipart/form-data" method="post" action=""> <input type="file" name="file" /> </form> </body> </html> In hindsight whilst writing this post I have just thought that maybe any easier solution would be to somehow 'hide' the browse button whilst keeping the 'browse' field and just create the image button. Thereby missing out the whole extra text field thing, but I'm not sure that would be possible. Please help me out, Jon visit my CryoKinesis Online Gallery
Yossi Admon Bipolar (III) Inmate From: Israel Insane since: Nov 2001	posted 12-01-2003 08:31 Hi, You can use the following function in order to attache to events (works fine on NS6+ and Mozilla): _attachToEvent = function(obj, name, func){ name = name.toLowerCase(); // Add the hookup for the event. if(typeof(obj.addEventListener) != "undefined"){ if(name.length > 2 && name.indexOf("on") == 0) name = name.substring(2, name.length); obj.addEventListener(name, func, false); } else if(typeof(obj.attachEvent) != "undefined"){ obj.attachEvent(name, func); } else { if(eval("obj." + name) != null){ // Save whatever defined in the event var oldOnEvents = eval("obj." + name); eval("obj." + name) = function(e) { try{ func(e); eval(oldOnEvents); } catch(e){} }; } else { eval("obj." + name) = func; } } } I.E. for attaching: function _init(){ alert("init"); } //Initialization hook up (attache to the window onLoad event) _popUpMenu._attachToEvent(window, "onload", _init);

Topic awaiting preservation: swapping [input type="file"] for a text field and button graphic (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=8962" title="Pages that link to Topic awaiting preservation: swapping [input type=&quot;file&quot;] for a text field and button graphic (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: swapping [input type="file"] for a text field and button graphic <span class="small">(Page 1 of 1)</span>\$

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

posted 11-29-2003 23:50

Hi Guys,

I could really use some help with this now, I have written this from scratch which is pretty good for me and it works which is also pretty good for me, but there are a few technically problems I'm having that I can't figure out.

Firstly I would like to get the same functionality to work in moz too (it only works in ie at the moment - the attachEvent code and .click() aren't moz compatible).

Secondly I was wondering if I'm using 'too much DOM' for a task that could be achieved more simply? Your advice and suggestions would be appreciated, as would the best ways to 'streamline' what I have which I think is a bit on the messy and cumbersome side.

And thirdly I was hoping you could suggest the best way to 'hide' the original file browse field when I create the new one.

In case you were wondering my aim is to produce a script that will scan for a file upload field in a page and switch it so that the 'browse' button can be an image. The point of using the DOM so much was to avoid putting code in the page since if javascript isn't enabled the file upload field still needs to work albeit with an ugly look.

code:

<html>

<head>



<script language="JavaScript" type="text/JavaScript">

	function fixUpload() {

		input = document.getElementsByTagName('INPUT')

		

		newInput = document.createElement( 'INPUT' )

		newInput.type = 'text'

		newInput.id = 'newInput'

		inputBtn = document.createElement( 'INPUT' )

		inputBtn.type = 'image'

		inputBtn.name = 'inputBtn'

		inputBtn.src = 'myButton.gif'

		inputBtn.attachEvent('onclick',function(){form[inputName].click()}) 

		

		for (i=0;i<input.length;i++) {

			if (input[i].type.toLowerCase()=='file') {

				inputName=input[i].name

				inputObj=document.getElementById('newInput')

				form=input[i].parentNode

				form.insertBefore(inputBtn,input[i])

				form.insertBefore(newInput,inputBtn)

				input[i].attachEvent('onchange',function(){inputObj.value = form[inputName].value;inputObj.focus()})

			}

		}

	}

	

window.onload=fixUpload

</script>



</head>

<body>



<form name="form1" id="form1" enctype="multipart/form-data" method="post" action="">

  <input type="file" name="file" />

</form>



</body>

</html>

In hindsight whilst writing this post I have just thought that maybe any easier solution would be to somehow 'hide' the browse button whilst keeping the 'browse' field and just create the image button. Thereby missing out the whole extra text field thing, but I'm not sure that would be possible.

Please help me out,

Jon

visit my CryoKinesis Online Gallery

Yossi Admon
Bipolar (III) Inmate

From: Israel
Insane since: Nov 2001

posted 12-01-2003 08:31

Hi,
You can use the following function in order to attache to events (works fine on NS6+ and Mozilla):
_attachToEvent = function(obj, name, func){
name = name.toLowerCase();
// Add the hookup for the event.
if(typeof(obj.addEventListener) != "undefined"){
if(name.length > 2 && name.indexOf("on") == 0) name = name.substring(2, name.length);
obj.addEventListener(name, func, false);
} else if(typeof(obj.attachEvent) != "undefined"){
obj.attachEvent(name, func);
} else {
if(eval("obj." + name) != null){
// Save whatever defined in the event
var oldOnEvents = eval("obj." + name);
eval("obj." + name) = function(e) {
try{
func(e);
eval(oldOnEvents);
} catch(e){}
};
} else {
eval("obj." + name) = func;
}
}
}

I.E. for attaching:

function _init(){
alert("init");
}
//Initialization hook up (attache to the window onLoad event)
_popUpMenu._attachToEvent(window, "onload", _init);

Maximum Security
OZONE
DHTML/Javascript
Server-Side Scripting - Oh my!
CSS - DOM - XHTML - XML - XSL - XSLT
Stupid Basic HTML
Visual Therapy
Photoshop
Photoshop Pong, Anyone?
*WARNING* BIG SIG APPROACHING
Photography
3D Modelling & Rendering
Multimedia/Animation
Print Graphics
Holding Pens
Philosophy and other Silliness
Outpatient Counseling
Site reviews!
Mad Scientists' Laboratory
Getting to know the Grail

Maximum Security

OZONE

DHTML/Javascript

Server-Side Scripting - Oh my!

CSS - DOM - XHTML - XML - XSL - XSLT

Stupid Basic HTML

Visual Therapy

Photoshop

Photoshop Pong, Anyone?

***WARNING*** BIG SIG APPROACHING

Photography

3D Modelling & Rendering