passing file to controller without using form,

问题

guys i am trying to load file from view to controller with out using form , while browsing a file the file should be loaded to controller using Ajax ,is it possible?

        <td>Import Excell file:</td>                                
        <td><input type="file" id="fileUpload" name="fileUpload" /></td>



$('#fileUpload').die().live("change", function (e) {
        e.preventDefault();
        var file_name = $("#fileUpload").val();
        var fileName = $("#fileUpload").val();
        var fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);     
        var file_data = $("#fileUpload").prop("files")[0];



        var form_data = new FormData();
        form_data.append("file", file_data);
        alert("hahaha");
        $.ajax({
            type: 'POST',     
            url: '@Url.Action("ImportExcell","Uploadfile")',
            data: form_data,
            contentType: false,
            enctype: 'multipart/form-data',
            processData: false,
            success: function (response) {
                alert(response);
            }
        });
    });

回答1:

Here goes the solution using FormData. One caveat with this solution is that FormData support is only available in modern browsers, so do not expect this to work with old browsers like IE7 - 9 etc.

Create a controller action in following way -

public JsonResult GetFormData(HttpPostedFileBase file, string Name)
{
    return Json(true);
}

Then your HTML would be -

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script>
    $(function () {
        $("#btnSubmit").click(function () {
            $.ajax({
                url: "/Home/GetFormData",
                type: "POST",
                data: function () {
                    var data = new FormData();
                    data.append("name", jQuery("#name").val());
                    data.append("file", jQuery("#file").get(0).files[0]);
                    return data;
                }(),
                contentType: false,
                processData: false,
                success: function (response) {                        
                },
                error: function (jqXHR, textStatus, errorMessage) {
                    console.log(errorMessage);
                }
            });
        });
    });
</script>    

Name : <input type="text" id="name" /> <br />
File: <input type="file" id="file" /> <br />
<input type="button" value="Click" id="btnSubmit" />

When the view is rendered and entered with some information -

enter image description here