1

Does any one know how to make a file upload control in javascript. For example, one using a texbox and a button.

Dupe of Javascript file uploads

Community
  • 1
  • 1
Kishh
  • 2,005
  • 4
  • 19
  • 16

5 Answers5

2

Plain HTML:

<input type="file" />

To programmatically create one using javascript:

var el = document.createElement('input');
el.type = 'file';
document.body.appendChild(el);
nickf
  • 537,072
  • 198
  • 649
  • 721
  • hey ya how to get open file dialouge box in javascript :) Kishh – Kishh Jan 12 '09 at 06:54
  • el.click() worked in some browsers at various points in time, but as always with file upload fields, the restrictions for security reasons are variable and generally tightening. At one point IE would open the dialogue but not actually allow the upload. It is not in general worth trying to achieve. – bobince Jan 12 '09 at 11:47
1

If my understanding is correct based on this and your previous topic, you're trying to upload a file PURELY in javascript. If this is the case, please note that this is not possible. You're going to need something on the server side to gain the request. Now, however, if you're looking for something that uploads in an "ajax" fashion, there are workarounds to do this by sending the request through a hidden iframe. I know JQuery has this capability built in.

Evan Fosmark
  • 98,895
  • 36
  • 105
  • 117
0

If you need it to open a dialog (or if you need the ability to select multiple files) you need to use something like SWFUpload.

Sophie Alpert
  • 139,698
  • 36
  • 220
  • 238
0

It is impossible to complete your task using pure javascript and using no fileinput html tags, as it is the only thing that allows you to select/upload files. You can only style it.

The other way, as suggested by soprano, is to use some Flash/Java based uploader.

bezmax
  • 25,562
  • 10
  • 53
  • 84
-1

Although the author of the question asked about form file input styling, I want to let you know that pure JavaScript, AJAX-style uploads are possible with FireFox 3 and greater.

I wrote an exhaustive tutorial about this new feature on my blog.