Using javascript/jquery on file input field

Question

I have a form with mulitiple file select. I just want send the each file to server via AJAX(selected via multiple select).

I can get the files using

document.getElementById('attachment_file').files

I want to use something like

var files = document.getElementById("attachment_file").files
$.each(files, function(index, file11){
       $.ajax({
        url: "/users",
        type: 'POST',
        dataType: 'json',
        data: {doc: {title: file11}},
        async: false,
        success: function() {
        }

      });
});

Here I'm not able to pass the file params. any suggesstions

beaver · Accepted Answer · 2018-08-22 17:12:10Z

1

You can create a FormData object and send that.

https://developer.mozilla.org/en/DOM/XMLHttpRequest/FormData

See the example code here under 'Sending files using a FormData object':

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

edited Aug 22, 2018 at 17:12

beaver

5271 gold badge9 silver badges21 bronze badges

answered Feb 3, 2012 at 6:32

sje397

41.9k9 gold badges90 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adeel Over a year ago

good idea but the majority of the browser(s) does not support

dbrin · Accepted Answer · 2012-02-03 06:29:02Z

0

AFAIK files are not allowed to be sent to the server via AJAX due to security constraints. Different libraries handle this issue differently - refer to your library docs.

answered Feb 3, 2012 at 6:29

dbrin

15.7k4 gold badges59 silver badges85 bronze badges

Comments

roman · Accepted Answer · 2012-02-03 06:32:05Z

0

you are not allowed to upload files with plain ajax, typical workarounds either involve flash or the (ab)use o iframes. https://github.com/blueimp/jQuery-File-Upload should be a good library to get you started...

answered Feb 3, 2012 at 6:32

roman

11.3k1 gold badge33 silver badges42 bronze badges

Comments

Oleksandr Fentsyk · Accepted Answer · 2012-02-03 06:32:12Z

0

you can use this uploader http://www.uploadify.com/documentation/options/width/

answered Feb 3, 2012 at 6:32

Oleksandr Fentsyk

5,4065 gold badges36 silver badges42 bronze badges

Collectives™ on Stack Overflow

Using javascript/jquery on file input field

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related