Post Image using Jquery

user_6877527 0
Viewed 35

I want to post my image with form data to the server , i am using "Serialize" to get data from Form , but couldnt find image over there, i found some example with the form Submit. but i dont want to use submit button. here is my code,

Html

        <div asp-validation-summary="ModelOnly" class="text-danger"></div>

        <div class="col-md-8">
          
                <div class="col-md-4">
                    <div class="form-group label-floating">
                        <label asp-for="Player_Name" class="control-label">Player Name<i class="fa fa-asterisk" style="color: red" aria-hidden="true"></i></label>
                        <input asp-for="Player_Name" required class="form-control" />
                        <span asp-validation-for="Player_Name" class="text-danger"></span>
                    </div>
                </div>
               
        </div>
        <div class="col-md-4">
            <ul class="gallery">
                <li><a href="" title="Player Image"><img class="img-responsive" id="PlayerImg" style="background-size:cover" /></a></li>
                <li>
                    <label asp-for="PlayerImage" class="btn btn-box-tool">
                        <i class="far fa-picture-o"> Upload</i> <input asp-for="PlayerImage" type="file" class="hidden" style="height:auto" />
                    </label>
                </li>
            </ul>
        </div>
    </form>

Jquery

  $(function () {


                            $('#PlayerCreate').click(function () {
                                try {
                                    var formData = $("#PlayerForm").serialize();
                                    $.post("/Players/Create", {
                                        data: formData,
                                        headers: {
                                            'RequestVerificationToken': document.getElementById("RequestVerificationToken").value,
                                        },
                                    }).done(function (data) {
                                        window.location = '/Players/Index'
                                        myFunction(data);
                                    }).fail(function (data) {
                                        myFunction(data);
                                    });
                                } catch (ex) {
                                    console.error(ex);
                                }
                            });
                        });
post image jquery
1 Answers

I found answer myself here is the code Jquery $(document).on('click', '#PlayerCreate', function (e) {

        //e.preventDefault();
        //e.stopImmediatePropagation();
        var form = $("#PlayerForm").closest("form");
        var formData = new FormData(form[0]);
        $.ajax({
            type: "POST",
            data: formData,
            headers: {
                'RequestVerificationToken': document.getElementById("RequestVerificationToken").value,
            },
            dataType: "json",
            url: "/Players/Create",
            processData: false,
            contentType: false,
            success: function (data) {
              //  myFunction(data);
                window.location = '/Players/Index'
            },
            fail: function (data) {
                //myFunction(data);
            }
        })
    });
user_68775270
Related