JSFiddle - React, Tailwind, and code Playground

by Alex Alex

HTML

<form name="myform" id="myform" action="InsertEmployees" method="POST" enctype="multipart/form-data">Name:
    <input type="text" name="id">
    <br/>Age :
    <input type="text" name="description">
    <br/>Image :
    <input type="file" name="photo" />
    <br/>
    <input type="submit" name="multiform" id="multiform">
</form>

JavaScript

$("#myform").submit(function (e) {
    //check form data support
    if (!window.FormData) {
        return;
    }
    
    var $form = $(this);
    var data = new FormData();
    var formURL = $form.attr("action");
    
    $form.find(':text').each(function () {
        data.append(this.name, this.value);
    });

    data.append(this.name, $form.find(':file').get(0).files[0]);
    
    $.ajax({
        url: formURL,
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        success: function (data) {
            alert(data);
        }
    });
    e.preventDefault();
});