1

First off, you'll have to forgive my lack of knowledge in submitting forms with Ajax; as a result I may ask a stupid question or two as I try to figure out exactly what I can and can't do with this.

Secondly, I know how to do simple Ajax requests using jQuery that usually look a lot like this:

$.ajax({
    url: "/SomeDir/SomePage.cshtml",
    async: true, //sometimes this is false, depending on how I want this to operate.
    type: "POST", //most of the time this is 'GET' but it depends on whether server-side changes will be taking place or sensitive data will be passed.
    dataType: "html", //This has the potential to change a lot.
    data: { someVar: someVarValue }, //any number of name/value pairs to send to the server with the request.
    success: function (response) {
        //success callback function code here.
    },
    error: function (jqXHR, textStatus, error) {
        //code to run if error occurs (usually displaying text showing the 'textStatus' and 'error' values.
    }
});

Okay, so now that I've shown you how I normally perform an Ajax request (just the standard jQuery way) you'll know where I am on this part of it.

Now for the my goal:

I have a simple <input id="inFile" name="inFile" type="file" /> with a home-made <button> underneath. When the button is clicked, what I need is for Ajax to take that file to the server, save it in a specified directory (I don't need instructions for that part), then re-update the page (I don't need help with that part either).

Pretty much, what I need to know is how to go from client-side to server-side with the file intact (with or without using a form) while not refreshing the page.

I have thought that perhaps I lack enough understanding of the Ajax type: "POST" that it may inherently provide some of the functionality I am asking for and I don't even know it.

I know I can send any data I want with the "data" property (is it called a property?) of the $.ajax(); function, but if that's the way it should be done, I don't know how to save the file into a variable/object/collection for sending with the $.ajax() function.

Sorry for my lack of knowledge on this, but I have never done this particular task with Ajax before, and I can't seem to find anything on this either.

In Short:

All I really need is to get the file from the client-side to the server side so that I can save it with C#'s System.IO

VoidKing
  • 6,282
  • 9
  • 49
  • 81
  • http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload – cetver Oct 09 '13 at 14:45
  • what is your backend? – kgu87 Oct 09 '13 at 14:52
  • @kgu87 ASP.NET WebPages with WebMatrix (C#). If I can just get the file to the server-side page, I can take it from there. I "like" to not use plug-ins, and in the other question linked, someone suggests an HTML 5 way of doing this, which seems nice, but I know IE 8 won't support it. That having been said, I don't have to support IE 8 for this, but as it stands, this is the only thing that will keep me from supporting IE 8, so I'd like to not cross that bridge unless I had to, but, if I have to, I will. – VoidKing Oct 09 '13 at 14:55
  • Is the project WebForms or MVC ? – kgu87 Oct 09 '13 at 14:57
  • @kgu87 Neither. WebPages. – VoidKing Oct 09 '13 at 14:58
  • 1
    Then you want to look at this - http://www.asp.net/web-pages/tutorials/files,-images,-and-media/working-with-files – kgu87 Oct 09 '13 at 15:04
  • @kgu87 I think I have done all of what is on that page before. I didn't see anything about AJAX there. I need AJAX because I can't refresh the page on this, unfortunately. – VoidKing Oct 09 '13 at 15:06
  • 1
    Use the HTML5 File API. If you need backwards compatibility, check your answers below. – Ohgodwhy Oct 09 '13 at 15:06
  • @Ohgodwhy Now that I have had so many give such useful information, I am beginning to realize that what it comes down to is exactly what you just said. – VoidKing Oct 09 '13 at 15:07
  • 1
    I think this was answered before, I just hope I understood your question right: http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery Good luck! :) – d-wade Oct 09 '13 at 14:45

1 Answers1

0

I would use HTML5 and pure javascript or a jquery plugin (There are many good cross-browser ones for downloading files that can be adapted, you really just need to format it here) to create fallbacks for older browsers. Then send data to a server script using ajax where you can write the posted data to a file on the server-side.

It's not the time for me to be awake so forgive me for not giving more detail, get in touch if you are still having trouble.

Note:I have no experience with web pages but since it uses c# I'd assume it's similar to MVC so once you post the data to the right script/function with ajax, you should have no problem writing it to a file despite the language.

Jason
  • 123
  • 1
  • 2
  • 10
  • Thanks for the info, Jason, but I have indeed solved this problem quite a while back. If I remember right, it was @dootzky 's link in his comment above that did it. – VoidKing May 27 '15 at 13:56
  • Also, @kgu87 's link has a lot of helpful information in it. – VoidKing May 27 '15 at 13:56
  • As I said, it's a comment, not an answer, so I can't do anything more than flag it as helpful, which I did. – VoidKing Jun 18 '15 at 16:14