Hochladen von Daten und Dateien in einem Formular mit Ajax?

Question

Ich benutze jQuery und Ajax für meine Formulare, um Daten und Dateien zu übermitteln, aber ich bin nicht sicher, wie man sowohl Daten als auch Dateien in einem Formular sendet?

Ich tue derzeit fast das Gleiche mit beiden Methoden, aber die Art und Weise, in der die Daten in einem Array gesammelt werden, ist anders, die Daten verwenden .serialize(); aber die Dateien verwenden = new FormData($(this)[0]);

Ist es möglich, beide Methoden zu kombinieren, um Dateien und Daten in einem Formular über Ajax hochladen zu können?

Daten jQuery, Ajax und html

$("form#data").submit(function(){

    var formData = $(this).serialize();

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

<form id="data" method="post">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <button>Submit</button>
</form>

Dateien jQuery, Ajax und html

$("form#files").submit(function(){

    var formData = new FormData($(this)[0]);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

<form id="files" method="post" enctype="multipart/form-data">
    <input name="image" type="file" />
    <button>Submit</button>
</form>

Wie kann ich die oben genannten Punkte kombinieren, so dass ich Daten und Dateien in einem Formular über Ajax senden kann?

Mein Ziel ist es, in der Lage sein, alle diese Form in einem Beitrag mit Ajax zu senden, ist es möglich?

<form id="datafiles" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button>Submit</button>
</form>

Answer 1

Ein einfacher, aber effektiverer Weg:
new FormData() ist selbst wie ein Behälter (oder eine Tasche). Sie können alles attr oder file in sich selbst stecken. Das Einzige, was Sie brauchen, ist das Anhängen der attribute, file, fileName z. B:

let formData = new FormData()
formData.append('input', input.files[0], input.files[0].name)

und übergeben Sie es einfach in der AJAX-Anfrage. Beispiel:

    let formData = new FormData()
    var d = $('#fileid')[0].files[0]

    formData.append('fileid', d);
    formData.append('inputname', value);

    $.ajax({
        url: '/yourroute',
        method: 'POST',
        contentType: false,
        processData: false,
        data: formData,
        success: function(res){
            console.log('successfully')
        },
        error: function(){
            console.log('error')
        }
    })

Sie können n Dateien oder Daten mit FormData anhängen.

und wenn Sie eine AJAX-Anfrage von einer Script.js-Datei an eine Route-Datei in Node.js stellen, achten Sie auf die Verwendung von
req.body zum Zugriff auf Daten (z.B. Text)
req.files zum Zugriff auf eine Datei (z. B. Bild, Video usw.)

Answer 2

Der folgende Code funktioniert bei mir

$(function () {
    debugger;
    document.getElementById("FormId").addEventListener("submit", function (e) {
        debugger;
        if (ValidDateFrom()) { // Check Validation 
            var form = e.target;
            if (form.getAttribute("enctype") === "multipart/form-data") {
                debugger;
                if (form.dataset.ajax) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    var xhr = new XMLHttpRequest();
                    xhr.open(form.method, form.action);
                    xhr.onreadystatechange = function (result) {
                        debugger;
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            debugger;
                            var responseData = JSON.parse(xhr.responseText);
                            SuccessMethod(responseData); // Redirect to your Success method 
                        }
                    };
                    xhr.send(new FormData(form));
                }
            }
        }
    }, true);
});

Übergeben Sie in Ihrer Action-Post-Methode den Parameter HttpPostedFileBase UploadFile und vergewissern Sie sich, dass die Dateieingabe dieselbe ist, wie in Ihrem Parameter der Action-Methode angegeben. Es sollte auch mit AJAX Begin Form funktionieren.

Denken Sie daran, dass Ihr AJAX BEGIN-Formular hier nicht funktionieren wird, da Sie Ihren Post-Aufruf im oben genannten Code definieren und Sie Ihre Methode im Code gemäß der Anforderung referenzieren können

Ich weiß, dass ich spät antworte, aber bei mir hat es folgendermaßen funktioniert

Answer 3

Zur Erinnerung: Im Jahr 2022 brauchen Sie Jquery nicht zu verwenden. Versuchen Sie js standard API abrufen

    var formData = new FormData(this);

    fetch(url, { 
      method: 'POST',
      body: formData
    })
    .then(response => {
      if(response.ok) {
        //success
        alert(response);
      } else {
        throw Error('Server error');
      }
    })
    .catch(error => {
       console.log('fail', error);
    });

Answer 4

Diese Lösung habe ich umgesetzt

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 5

---Lösung für DOT NET CORE MVC Implementierung---

Beim Betrachten dieser Frage dachte ich, ich sollte rechts .NET CORE-Implementierung für diese, weil die Frage nicht spezifisch für jede Backend-Sprache ist. Also Jungs hier ist die Standalone-Implementierung Beispiel.

Zielsetzung :- Übermittlung von Formularfeldern einschließlich Dateien und wie wir Daten in einem einzigen Modell am Backend erhalten können

HTML-Code / Code anzeigen - Ansichten/Home/Index.cshtml

@{
    ViewData["Title"] = "Home Page";
}

<input type="file" id="FileUpload1" multiple />
<div>
    <label>Enter First Name :</label>
    <input type="text" id="nameText" maxlength="50" />

</div>
<input type="button" id="btnUpload" value="Submit Form with Files" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('#btnUpload').click(function () {

            // Checking whether FormData is available in browser
            if (window.FormData !== undefined) {

                var fileUpload = $("#FileUpload1").get(0);
                var files = fileUpload.files;

                // Create FormData object
                var fileData = new FormData();

                // Looping over all files and add it to FormData object
                for (var i = 0; i < files.length; i++) {
                    fileData.append("files", files[i]);
                }
                // Adding one more key to FormData object
                fileData.append('FirstName', $("#nameText").val());

                $.ajax({
                    url: '/Home/UploadFiles',
                    type: "POST",
                    contentType: false, // Not to set any content header
                    processData: false, // Not to process data
                    data: fileData,
                    success: function (result) {
                        alert(result);
                    },
                    error: function (err) {
                        alert(err.statusText);
                    }
                });
            } else {
                alert("FormData is not supported.");
            }
        });
    });
</script>  

Backend-Code / Controller-Aktionsmethode Steuerungen/HomeController.cs

public class HomeController : Controller
{
    private readonly ILogger<HomeController> _logger;
    private readonly IWebHostEnvironment _environment;

    public HomeController(ILogger<HomeController> logger, IWebHostEnvironment environment)
    {
        _logger = logger;
        _environment = environment;
    }

    public IActionResult Index()
    {
        return View();
    }

    public IActionResult Privacy()
    {
        return View();
    }

    [HttpPost]
    public async Task<IActionResult> UploadFiles(MyForm myForm)
    {
        var files = myForm.Files;
        // First Name 
        string name = myForm.FirstName;

        // check All files
        foreach (IFormFile source in files)
        {
            string filename = ContentDispositionHeaderValue.Parse(source.ContentDisposition).FileName.Trim('"');

            filename = this.EnsureCorrectFilename(filename);
            string fileWithPath = this.GetPathAndFilename(filename);
            // Create directory if not exist
            Directory.CreateDirectory(Path.GetDirectoryName(fileWithPath));

            using (FileStream output = System.IO.File.Create(fileWithPath))
                await source.CopyToAsync(output);
        }

        return Ok("Success");
    }

    [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
    public IActionResult Error()
    {
        return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
    }

    public class MyForm
    {
        public string FirstName { get; set; }
        public IList<IFormFile> Files { get; set; }
    }

    private string EnsureCorrectFilename(string filename)
    {
        if (filename.Contains("\\"))
            filename = filename.Substring(filename.LastIndexOf("\\") + 1);

        return filename;
    }

    private string GetPathAndFilename(string filename)
    {
        return Path.Combine(_environment.ContentRootPath, "uploadedFiles", filename);
    }
}

Vollständiges Quellcode-Repositorium: https://github.com/rj-learning/DotNetCoreFileUpload