How can I upload a file using jquery's $.ajax function with json and php

Question

I am trying to upload a file using jQuery\'s $.ajax function but didn\'t get any output. Somebody please help me to solve this. I don\'t know if this script is

Answer 1

Ajax supports File upload using FormData Object, Also supports in all major browser except IE8/9 See below

https://developer.mozilla.org/en-US/docs/Web/API/FormData

Answer 2

Simply use submit event on form to send the files and prevent default form action

$('#form').submit(function(e) { return false; });

and get the file on the server side via

$_FILES['inputName'];

Answer 3

You can use either of the two plugins Jquery File Upload Plugins 1 or Jquery File Upload Plugins 2 and there's no errors on this script.

Hope it helps

Thanks, Rashid

Answer 4

This is how I've done it. Use the FormData object.

Note: The odd syntax of the for statement is just setting "f" to the array[i] instance.

        $("#submit").click(function () {
            var formData = new FormData();
            for (var i = 0, f; f = fileArray[i]; i++) {
                formData.append("opmlFile", f);
            }
            $.ajax({
                url: "/Documents/SaveFiles/" + @Model,
                type: "POST",
                data: formData,
                cache: false,
                contentType: false,
                processData: false
            })
            .error(function (xhr, status, error) {
                $.notify(error, true);
            })
            .success(function (data, status, xhr) {
                $.notify("Success");
            });
        });

Unfortunately I don't recall which article I got this from, but it was someone else on Stack Overflow.

Answer 5

AJAX doesnt support file uploading. There are plugins like ajaxfileupload which basically creates a hidden form and uploads your file dynamically.

take a look here and read Oli's answer

Answer 6

I'm using this and it's working fine:

  $('#btnUploadFile').on('click', function () {
                var data = new FormData();
                var files = $("#fileUpload").get(0).files;

                // Add the uploaded file content to the form data collection
                if (files.length > 0) {
                    data.append("upload", files[0]);
                }

                // Make Ajax request with the contentType = false, and procesDate = false
                var ajaxRequest = $.ajax({
                    type: "POST",
                    url: "/api/documents",
                    contentType: false,
                    processData: false,
                    data: data,

                    error: function (xhr, status, error) {
                        console.log(xhr);
                        console.log(status);
                        console.log(error);
                        console.log(data);
                    }
                });

                ajaxRequest.done(function (xhr, textStatus) {
                    $("#response").attr('class', "alert alert-success");
                    $("#response").html("File uploaded successfully");
                });


            });