使用Ajax调用将文件上传到虚拟目录

Question

I am building a CMS as MVC 4 project and one of the features is to upload your photo . The user chooses a photo from his hard drive, which triggers an ajax request to the UploadFile method on the controller. This should copy the photo to a virtual folder on the server. The problem is I don't really understand where the browser stores the file and sends it to the server, and what I am supposed to do on the controller.

This is my code so far -

The view:

<input id="cng_pic_btn" type="file" name="file" accept="image/*" /></td>

JavaScript making the call to the server:

$('#cng_pic_btn').live('change', function () {

    custom_url = "/SideBar/UploadFile";
    return_msg = "file uploaded";

    var file_path = $('#cng_pic_btn').attr("value");
    alert(file_path);
    sendInfo = {
        upload_from: file_path
    }

    CreataAjaxRequest(custom_url, sendInfo, return_msg);

})

The conroller method:

    [HttpPost]
    public void UploadFile(string upload_from)
    {
            string path = @"D:\Temp\";

            HttpPostedFileBase photo = Request.Files[upload_from];

            photo.SaveAs(path + photo.FileName);
    }

send ajax request:

function CreataAjaxRequest(custom_url, sendInfo, return_msg) {

    $.ajax({ type: "POST", url: custom_url, data: sendInfo })
                .success(function (html) {
                    $(".query-result").replaceWith(html);

                })

}

Answer 1

You haven't shown your CreataAjaxRequest method but if you want to upload files using AJAX there are a couple of options:

• your client browser supports the HTML 5 File API in which case you could use the XmlHttpRequest2 object
• your client browser doesn't support the File API (Such as Internet Explorer) in which case you could use a file upload plugin such as Uploadify or Fine Uploader which use techniques like hidden iframes or Flash movies for those kind of legacy browsers.

Here's an example of how you could upload a file using the HTML 5 File API:

function CreataAjaxRequest(custom_url, sendInfo, return_msg) {
    var xhr = new XMLHttpRequest();
    var fd = new FormData();
    xhr.open('POST', custom_url, true);
    var file = document.getElementById('cng_pic_btn').files[0];;
    fd.append('myFile', file);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            $('.query-result').replaceWith(xhr.responseText);
        }
    };
    xhr.send(fd);
}

and then on your server:

[HttpPost]
public ActionResult UploadFile(HttpPostedFileBase myFile)
{
    var path = string path = @"D:\Temp\";
    myFile.SaveAs(Path.Combine(path, myFile.FileName));

    return PartialView();
}

Also notice that your controller action needs to return a PartialView if you want to use the $('.query-result').replaceWith(xhr.responseText); method in your AJAX callback, otherwise what are you replacing with?