如何在jQuery中通过Ajax将文件保存以发送到服务器？

Question

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

Answer 1

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.