使用Jquery / Ajax将文件上传到本地REST服务

Question

I want to upload files to our DB through my REST service using the file explorer, as of now I manage to open the file explorer by clicking my findDocumentOnboarding button of input type="file" . But I have not managed to upload the selected file using my uploadDocumentOnboarding button.

I have tried using the following code:

HTML :

<input type="button" value="Upload document" class="btn btn-xs btn-primary uploadDocumentOnboarding">
<input id="file" type="file" class="findDocumentOnboarding">

Jquery/Javascript :

    $(".uploadDocumentOnboarding").on(click, function (evt) {
    IdToEdit = $(this).closest('tr').siblings().find('p.important').text();
    alert(IdToEdit);
    var url = "http://localhost:10110/MavenProject/api123/Onboard/uploads/"+IdToEdit;
    evt.preventDefault();

    var documentData = new FormData();
    documentData.append("file", $('input#file.findDocumentOnboarding')[0].files[0]);
    $.ajax({
        url: url,
        type: 'PUT',
        data: {'testBlob': (documentData)},
        async: false,
        cache: false,
        contentType: false,
        enctype: 'multipart/form-data',
        processData: false,
        success: function (response) {
            alert(response);
        }
    });

    return false;
});

What am I doing wrong here?

Any help is greatly appreciated!

Edit : I'm now getting PUT 415 Unsupported Media Type

Answer 1

尝试用.on("click"代替.on(click ;删除async: false, ，， enctype: 'multipart/form-data',

Answer 2

I had to do it like this, notice the POST instead of PUT and the data and appended data difference:

    $(".uploadDocumentOnboarding").on("click", function (evt) {
    IdToEdit = $(this).closest('tr').siblings().find('p.important').text();
    var url = "http://localhost:10110/MavenProject/api123/Onboard/uploads/"+IdToEdit;
    evt.preventDefault();

    var documentData = new FormData();
    documentData.append('file', $('input#file.findDocumentOnboarding')[0].files[0]);
    $.ajax({
        url: url,
        type: 'POST',
        data: documentData,
        cache: false,
        contentType: false,
        processData: false,
        success: function (response) {
            alert("Document uploaded successfully.");
        }
    });

    return false;
});