5

I've to send a file to my server using jQuery. How can I do it using JSON?

The file type is not important, I intend to receive a byteArray or something like that on my server application.

If it helps I'm using an ASP.NET application, but my problem is not the way I handle that on server side, the issue is how to send the file data using jQuery.

I've found some upload plugins for jQuery that use a Flash file, others that do not use Flash, but what I really want to know is how the process works, not just use something already created by someone!

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Flavio CF Oliveira
  • 5,235
  • 13
  • 40
  • 63

5 Answers5

5

jQuery is JavaScript. I think you mean to send the data via Ajax which can not be done. The best thing you can do is to use an iframe to a page that uploads the file to a temporary directory (not the default temp), and then provides the information back to the parent page as to where the file is saved then you use it.

There is no way to upload a file to a server using Ajax. It's too insecure.

I retract the Statement above NOW

You are now able to post/download file data using Javascript it's very complicated for a novice to understand but is now possible unlike when this question was answered

Using HTML5 file uploads with AJAX and jQuery

Barkermn01
  • 6,781
  • 33
  • 83
2

I've tried it using $.ajaxFileUpload (http://www.phpletter.com/Demo/AjaxFileUpload-Demo/) and if you are using ASP.NET MVC you can retrieve the files as follows

  public ActionResult UploadFiles(List<HttpPostedFileBase> uFile)

Usage of $.ajaxFileUpload:

  $.ajaxFileUpload
(
    {
        url: "/Controller/UploadFiles", 
        secureuri: false,
        fileElementId: 'uFile', // the id of the file input controls holding the references to the files
        dataType: 'json',
        success: function (data, status) {
            // needs to handle the json return
        },
        error: function (data, status, e) {
            // same as error
        }
    }
)

For me it works very well.

drcoderz
  • 341
  • 2
  • 3
2

File uploads won't work through an AJAX request. It needs to be a full HTTP request (POST). Any jQuery plugins that are used typically use either a Flash- or Java-based applet or the hidden iframe trick where a real POST is done using an iframe hidden on the page.

tvanfosson
  • 524,688
  • 99
  • 697
  • 795
1

You can invoke an HTTP Post using $.ajax, you dont have to do any manual labor manipulating the file content to json. The payload will be in the HTTP Request if your form contains an input (type="file"). I can send a code sample if you can give me more detail about your code.

Glenn Ferrie
  • 10,290
  • 3
  • 42
  • 73
  • i'm planning the process, just checking the possibilities to do that. if you have some working code, that could helps i appreciate that very much. tnkx – Flavio CF Oliveira May 26 '11 at 17:11
  • My problem is not the server-side, what i dont know is how to send a file to the server usign a Client-side script like jquery. But i'm using webforms – Flavio CF Oliveira May 26 '11 at 20:15
-2

I highly recommend using valum's plugin for this. It has a lot of support and is consistently updated as browsers begin implementing HTML5 support such as FileReader, etc. Making it easier and easier to send "AJAX" file requests.

https://stackoverflow.com/search?q=valums

EDIT: Sorry for not reading your question fully - I read the title, read the first couple paragraphs and thought I knew what you were looking for. It happened to be that the last paragraph held an exclusionary clause that I didn't see.

Community
  • 1
  • 1
John Strickler
  • 25,151
  • 4
  • 52
  • 68