how to upload a file using javascript
+2
A:
Assuming you mean "In a browser" and "Without Flash/Java/Other plugins".
- Have the user select a file using a file input in a form.
- Call the submit method of the form object
e.g.
document.forms.myForm.submit();
If you want to do it without leaving the current page; set the target of the form to an iframe.
Don't forget to set the enctype.
David Dorward
2010-03-17 12:08:05
But that won't upload a file to the server
Marcos Placona
2010-03-17 12:09:02
@mplacona - Yes, it will. What makes you think otherwise?
David Dorward
2010-03-17 12:10:16
..did you forget to mention that javascript **cant** upload any file on the webserver, as it is client-side, and a server-side program language is required (php, python, ruby, whatever)?
DaNieL
2010-03-17 13:05:28
Exactly what I I was saying...
Marcos Placona
2010-03-17 13:46:00
@mplacona - if you go to a page written entirely in HTML being served just by apache select a file using a file input and click submit, the file is uploaded to the server. I think what you mean is that a server side language is required to do something productive with the file.
thetaiko
2010-03-17 13:52:55
@DaNiel - uploading means "sending the data somewhere", you **can** upload a file like this. Without a server side process to accept it, it will be received and then discarded. It will still be uploaded. Anything involving uploading or downloading will need a client **and** a server, I assumed the server component was obvious enough to not need an explicit mention. Incidentally, the server side process could be written in JavaScript, the programming language isn't exclusive to web browsers.
David Dorward
2010-03-17 15:36:04
@David: yep, youre *technically* right, but its obvious that is the common sense (and im sure that is even for this question) for 'upload' to mean *send a file from user client to my server and save it* ;)
DaNieL
2010-03-17 16:35:35
+2
A:
You can't is the simple answer.
You could do it using a server-side language such as PHP, ColdFusion, ASP etc, and use Ajax to communicate with it and upload your file.
Here's a simple PHP tutorial and a ColdFusion tutorial as well
Hope the help you
Marcos Placona
2010-03-17 12:08:13
While you can use Ajax, many people think of Ajax and XHR as being synonymous, but you can't use XHR for this, so you might want to be more explicit.
David Dorward
2010-03-17 12:11:51
@mplacona using php can i automate this file uploading process.means i donot want that user browse for file upload.
Freshers
2010-03-17 12:18:06
Yes, but won't the user have to select the file in order for it to be uploaded?
Marcos Placona
2010-03-17 12:26:46
@Freshers: What if the file does not exists? How can you be sure that the user has this file?
Felix Kling
2010-03-17 13:03:37
Out of the box, you can't provide a predefined path. Also, As well as non-existing files, the path might be different from machine to machine, I.e. 62 bit machies will have two program files paths. Macs will have *nix paths and etc
Marcos Placona
2010-03-17 16:17:58
A:
Take a look at the AJAX toolkit (google it) and look at the asyncrhonus file upload control. You should get the code in the page source for your browser.
However, it might be a better idea to use controls defined for this in the language you are using because javascript is browser dependant. The Javascript found within the page source of the toolkit page IS broswer dependant, but is generate on the fly, so it can adapt, unlike normal Javascript.
David Brunelle
2010-03-17 12:10:05
+1
A:
If you're trying to ask how to do it AJAX-style, i.e. without navigating away from the page, the answer lies in using iframes. There are several examples of this if you google for it, but here's one to get you started: http://www.webtoolkit.info/ajax-file-upload.html
The problem is that you can't upload a file via a regular AJAX form, so you have to make the browser submit the form properly. This is done by submitting the form in a hidden iframe instead.
Of course you should make sure the form works (though with a page refresh) when JavaScript is disabled. This is called "progressive enhancement" and is always a good idea.
The actual target of the form must of course be a script that is capable of handling the file upload, but this is true with JavaScript and without. JS being client-side, it can't (and shouldn't!) write to the server directly.
Alan
2010-03-17 12:12:09