jQuery Ajax Datei-Upload

Question

Kann ich den folgenden jQuery-Code verwenden, um Datei-Upload mit POST-Methode einer Ajax-Anfrage durchzuführen?

$.ajax({
    type: "POST",
    timeout: 50000,
    url: url,
    data: dataString,
    success: function (data) {
        alert('success');
        return false;
    }
});

Wenn dies möglich ist, muss ich dann die data Teil? Ist das der richtige Weg? Ich POSTe die Datei nur an die Serverseite.

Ich habe herumgegoogelt, aber was ich gefunden habe, war ein Plugin, während ich es in meinem Plan nicht verwenden möchte. Zumindest für den Moment.

Answer 1

Der folgende Code zeigt, dass es funktioniert

var formData = new FormData();
var files = $('input[type=file]');
for (var i = 0; i < files.length; i++) {
if (files[i].value == "" || files[i].value == null) {
 return false;
}
else {
 formData.append(files[i].name, files[i].files[0]);
}
}
var formSerializeArray = $("#Form").serializeArray();
for (var i = 0; i < formSerializeArray.length; i++) {
  formData.append(formSerializeArray[i].name, formSerializeArray[i].value)
}
$.ajax({
 type: 'POST',
 data: formData,
 contentType: false,
 processData: false,
 cache: false,
 url: '/Controller/Action',
 success: function (response) {
 if (response.Success == true) {
    return true;
 }
 else {
    return false;
 }
 },
 error: function () {
   return false;
 },
 failure: function () {
   return false;
 }
 });

Answer 2

$("#form-id").submit(function (e) {
   e.preventDefault();
});

$("#form-id").submit(function (e) {

     var formObj = $(this);
     var formURL = formObj.attr("action");
     var formData = new FormData(this);
          $.ajax({
             url: formURL,
             type: 'POST',
             data: formData,
             processData: false,
             contentType: false,
             async: true,
             cache: false,
             enctype: "multipart/form-data",
             dataType: "json",
             success: function (data) {
                 if (data.success) {
                        alert(data.success)
                 } 

                 if  (data.error) {
                        alert(data.error)
                 } 
             }
         });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<form class="form-horizontal" id="form-id" action="masterFileController" enctype="multipart/form-data">
    <button class="btn-success btn" type="submit" id="btn-save" >Submit</button>
</form>

Servlet-Antwort als "out.print("Ihre Antwort");"