Send file along with JSON Information with AJAX

Question

I have an ASP.NET c# page that will post information of form with AJAX in JSON format. This information includes text of Texboxes and values of Dropdownlists and etc.

Also i need to send a file too.

I have tried the following code and it works fine:

                $(".popup-content input:text,.popup-content textarea").each(function () { // Fill object by inputs
                    objInputs[$(this).attr("name")] = $(this).val();
                });
                $.ajax({ //Post information
                    type: "POST",
                    url: "myAjax.aspx",
                    data: { func: "Create", information: JSON.stringify(objInputs) /* Convert object to JSON string */ },
                    success: function (data) { // if sending was successful try to send file
                                var files = $("#fileImage").get(0).files; //get files form uploadfile
                                if (files.length > 0) {
                                    var data = new FormData();
                                    data.append(files[0].filename, files[0]);
                                    $.ajax({ //Send file
                                        type: "POST",
                                        url: "Handler1.ashx",
                                        contentType: false,
                                        processData: false,
                                        data: data,
                                        success: function (data) {

                                        },
                                        error: function (xhr, ajaxOptions, thrownError) {
                                            alert(xhr.status + " " + thrownError);
                                        },
                                    });
                             }
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(xhr.status + " " + thrownError);
                    },
                });

But now i want to know if there is a way to send my file along with my JSON?

What have you tried so far? what kind of application are you creating using ASP.NET? Web Forms? MVC? — Guanxi, Nov 13 '15 at 14:03
Then google out how to upload file and if you face any issues implementing ask questions regarding that here. I am sure you can easily find lots of things on google regarding file upload. — Guanxi, Nov 13 '15 at 14:09
ASP.NET Ajax uses the XMLHttpRequest object, so it's javascript. Check this post: http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload. — Danny Fardy Jhonston Bermúdez, Nov 13 '15 at 14:13
@Guanxi I've searched on Google, but only for AJAX file will be sent. I want the JSON data files are sent. — nima shayanfar, Nov 13 '15 at 14:22
@DannyFardyJhonstonBermúdez: I tried this method but I want the JSON data files are sent. — nima shayanfar, Nov 13 '15 at 14:26
I am not at all clear what you are trying to do? I think there is a disconnect between what you want and what your question asks for. If link provided by Danny doesn't help, then you might consider putting more information in your question. — Guanxi, Nov 13 '15 at 14:26
@nimashayanfar Do you want send json data content in the request? I don't understand. — Danny Fardy Jhonston Bermúdez, Nov 13 '15 at 15:13
@DannyFardyJhonstonBermúdez I want send json in data of Ajax jquery with my file. — nima shayanfar, Nov 13 '15 at 18:03

nima shayanfar · Accepted Answer · 2015-11-14T08:01:35.300

I found the solution. The Jquery code should be changed to something like below:

<script>
        $(document).ready(function () {
            $(document).on("click", "#submit", function () {
                var objInputs = {};
                objInputs["id"] = "12";
                $("#form1 input:text").each(function () { // Fill object by inputs
                    objInputs[$(this).attr("name")] = $(this).val();
                });
                var formData = new FormData();
                formData.append("information", JSON.stringify(objInputs));
                var files = $("#fileupload").get(0).files; //get files form uploadfile
                if (files.length > 0) {
                    for (var i = 0; i < files.length; i++) {
                        //add each file to the form data and iteratively name them
                        formData.append("file-" + i, files[i]);
                    }
                    $.ajax({ //Send file
                        type: "POST",
                        url: "Handler1.ashx",
                        contentType: false,
                        processData: false,
                        data: formData,
                        success: function (data) {
                            alert(data)
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert(xhr.status + " " + thrownError);
                        },
                    });
                }
            });
        });
    </script>

And C# code to handling data which was sent (Handler1.ashx):

    public void ProcessRequest(HttpContext context)
    {
        if (context.Request.Files.Count > 0) //To handling files
        {
            HttpFileCollection files = context.Request.Files;
            for (int i = 0; i < files.Count; i++)
            {
                if ((files[i].ContentLength < 500000) && (files[i].ContentType == "image/jpeg"))
                {
                    HttpPostedFile file = files[i];
                    string fname = context.Server.MapPath("~/Images/" + file.FileName);
                    file.SaveAs(fname);
                }
            }
            context.Response.ContentType = "text/plain";
            context.Response.Write("File Uploaded Successfully!");
        }
        if (!string.IsNullOrEmpty(context.Request["information"])) //To handeling JSON
        {
            string JSON = context.Request["information"]; //JSON String
        }
    }

Send file along with JSON Information with AJAX

1 Answers1