javascript - Upload files on server. Invoking onclick method of <input> object -

i have problems.

i need create page, allow user upload self files on server. planning use remote scripting dynamical page update.

first requirement not use javascript plugins. second - on page placed button may call dialog user can choose reuired files.

first created hidden form:

<form style='display:none;'>    <input id='fileuploader' type='file' name='filename'> </form> 

then created button:

<button onclick='uploadfile();'>add file</button> 

some code, wrote:

<script type='text/javascript'>   function uploadfile(){     //get object handle     var input = document.getelementbyid('fileuploader');     // must create event object, me invoke      // onclick method of object     if(document.createevent){         //this piece firefox/opera/etc....         var o = document.createevent('mouseevents');         o.initmouseevent( 'click', true, true);         input.dispatchevent(o);     } else if (document.createeventobject) {         var o = document.createeventobject();         o.type = 'click';         input.fireevent('onclick',o);     } else {         console.log('your brouser stupid')     }    } </script> 

this code working on browsers except ie (i tested on 8). if test method on object, example button or div - work, on ie 8.

can enyone me wrong?

try changing:

o.initmouseevent( 'click', true, true); 

to:

o.initmouseevent( "click", true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null); 

ie fire document.createevent. passing arguments through initmouseevent should allow work in browsers.

http://jsfiddle.net/bz2lw/7/