posting data as...?

Question

I'm not even sure if this is possible...

Given a form with <input id="fileinput" type="file" />, and a valid selected file, can I POST the value using document.getElementById("fileinput").value in an XMLHttpRequest object and expect $_FILES to hold the object? If the POST can be reasonably expected to go through, how can I get the file's info?

Follow Up

Is it then possible to use a standard XMLHttpRequest Object with FileReader for uploading a file? Or is this an entirely different can of fish? I'm trying to minimize extraneous code, not repeatedly ask stupid questions.

Edit - Closing

Found out it can be done with no issue and few problems using just the rudimentary file API without filereader, though it incorporates filereader for those who have it.

Essentially, use XMLHttpRequest().upload to send the File. Completely asynchronous; but no joy in IE or Opera, in which case I can fall back to a standard synchronous form or to the iframe fake.

Anyhow, since apparently it can't be done, I think it'll make a great piece of open source to publish. Thanks all.

Possible duplicate of http://stackoverflow.com/questions/543926/is-it-possible-to-use-ajax-to-do-file-upload — simshaun, Nov 17 '11 at 17:59

score 1 · Answer 1 · answered Nov 17 '11 at 17:59

1

No, JavaScript has no access to the files in a file input field.

Most of the workarounds involve a Flash uploader of some sort, like SWFUpload. There's some neat HTML5 stuff but you'll lose the 50% of the Internet that are IE users.

answered Nov 17 '11 at 17:59

ceejayoz

176,543
40
303
368

Develop for the best, fall back for the rest. What is some of that "Neat HTML5 stuff"... You mean like FileReader? – stslavik Nov 17 '11 at 18:06
See Gmail's drag-and-drop uploader for an example. I tend to develop for most if possible without a significantly reducing functionality. – ceejayoz Nov 17 '11 at 18:13
Hooray for the status-quo... Advance by pushing the envelope, not waiting for it to be delivered to you. – stslavik Nov 17 '11 at 18:17
I'm not spending my boss's money on doing twice the work to implement the same feature unless there's a good reason. – ceejayoz Nov 17 '11 at 18:55
1

I'm not talking about spending your boss's money to do a job; I'm talking about doing your best on time, under budget, and at the bleeding edge. Do it because you dedicate yourself to what you do – the time is going to be spent at one point or another; now or later, it makes no difference to me. – stslavik Nov 17 '11 at 20:58

score 1 · Accepted Answer · answered Nov 17 '11 at 18:16

1

You can in HTML5: http://jsfiddle.net/Cjs4G/.

document.getElementById("upload").onchange = function(e) { // on file select
    var fr = new FileReader; // reads files

    fr.onloadend = function() {             // when done reading
        alert(fr.result.substring(0, 100)); // alert first part of data
        // or send `fr.result` through AJAX
    };

    fr.readAsBinaryString(e.target.files[0]); // start reading
};

answered Nov 17 '11 at 18:16

pimvdb

151,816
78
307
352

Good. Doesn't work in Safari, which means I could fall back for Safari using the `iframe` method. – stslavik Nov 17 '11 at 18:19
@stslavik: I believe it does not even work in IE9 so it might not be production-ready yet. – pimvdb Nov 17 '11 at 18:20
Probably not. But I'm getting options, which I wasn't getting before (see all answers starting with "No") – stslavik Nov 17 '11 at 18:30

score 0 · Answer 3 · edited Nov 17 '11 at 18:00

0

try valums file-uploader

i just implement it like a week ago for ajax image uploading

https://github.com/valums/file-uploader

edited Nov 17 '11 at 18:00

Patricia

7,752
4
37
70

answered Nov 17 '11 at 17:58

Utku Yıldırım

2,277
16
20

score 0 · Answer 4 · edited May 23 '17 at 12:21

0

NOPE.

you CANNOT post files ajaxly.

have a look at this question on ways to fake it.

How to fake ajax file upload?

or this one: How can I upload files asynchronously?

edited May 23 '17 at 12:21

Community

1
1

answered Nov 17 '11 at 17:59

Patricia

7,752
4
37
70

Not true. If the browser supports HTML5 file api, it's possible to use AJAX to send the file to the server. – simshaun Nov 17 '11 at 18:02
neato. i haven't seen that. but how many browsers support that? certainly not IE 8, which is still probably the most commonly used browser. – Patricia Nov 17 '11 at 18:03
It's true that it's not viable to rely on it (yet). I was just stating it's possible. lol – simshaun Nov 17 '11 at 18:05

posting data as...?

4 Answers4