Closed Thread Icon

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=&amp;quot;file&amp;quot;] for a text field and button graphic (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: swapping [input type=&quot;file&quot;] 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 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 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);

« Backwards — Onwards »

Show Forum Drop Down Menu