Question

Is there a way to construct another element that can enable posting of files to server?

without using the tag

<input type='file'>

Answer 1

If you want to do drag-and-drop, you can use the new drag and drop stuff from HTML5 (supported in Firefox and Chrome as of this writing). That doesn’t require an input type='file'.

Otherwise, you cannot do this in pure HTML+JavaScript without an input type='file' element. As thejh points out (in a now-deleted answer), you can do this without actually submitting a form by using the File API, but that still requires using an input type='file' (although it doesn’t require submitting a form and refreshing the page). Here’s an example (here on SO) of reading a file using JavaScript and the File API; from there, sending it via ajax is a trivial step. And this is useful for providing an enhanced user experience on those browsers that support the File API (progress bars, early detection and reporting of unsupported file types, early detection and reporting of files that are too big, etc.).

You can, of course, do this with non-HTML/JavaScript technologies like Flash and (signed) Java applets, but if you’re looking for a “pure” plug-in-free mechanism, the good old input type='file' is still your only bet. You can progressively-enhance it via the File API on browsers that support it, though, which is useful.