如何用ajax发布文件？

Question

Trying to save a file to a db. I am using formData via javascript to append the file and adding this as a post object via ajax. for some reason nothing gets sent.

What am I doing wrong?

HTML

<input type="file" style="display: none;" class="btn btn-primary uploadFile">

script:

        $(".saveImage")
            .on("click",
                function() {
                  var files = $(".uploadFile");
                  var data = new FormData();


                  data = $.OverWatch.worker.uploadFileHandler.addUploadFiles(files, data);


                    $.OverWatch.worker.postUserData("/Administration/AddUserImage", data, function () {
                        alert("done");
                    });

                });

Functions above look like:

        addUploadFiles: function (files, data) {
            $.each(files, function (i, v) {
                var file = $(this).data("files");
                data.append("file", file);
            });

            return data;
        }

postUserData:

    postUserData: function(url, data, callback) {

        $.LoadingOverlay("show");
        $.ajax({
            url: url,
            type: 'POST',
            data: data,
            cache: false,
            processData: false,
            contentType: false,
            dataType: "HTML",
            success: function(data) {

                if (callback) {
                    callback(data);
                    $.LoadingOverlay("hide");
                }

            },
            error: function(event, jqxhr, settings, thrownError) {
                //$.helpers.errorHandler($("#fileDialogErrors"), event.responseText);
                var h;
                $.LoadingOverlay("hide");
            }
        });
    },

backend:

    public ActionResult AddUserImage()
    {
        if (Request.Files.Count != 0)
        {
           //save
        }

        return null;
    }

edit:

 var files = $(".uploadFile");

returns:

Answer 1

I haven't done it with jQuery but just learned how to do it myself yesterday using plain old javascript... the following worked for me. If you want to stick with jquery maybe you can translate the functions to what you need:

var formElement = document.querySelector("form");
var payload = new FormData(formElement);

function onStateChange(ev) {
     // Check if the request is finished
     if (ev.target.readyState == 4) {
         editor.busy(false);
         if (ev.target.status == '200') {
             // Save was successful, notify the user with a flash

         } else {
             // Save failed, notify the user with a flash

         }
     }
};

xhr = new XMLHttpRequest();
xhr.addEventListener('readystatechange', onStateChange);
xhr.open('POST', '/posts');
xhr.send(payload);

Maybe see if using the above code works for you (it just targets a form that you have on the same page), and then you can troubleshoot whether it's your script that's the problem or a backend / communication problem.