We help IT Professionals succeed at work.

Ajax call for data and upload

ITsolutionWizard
ITsolutionWizard asked
on
Below ajax code working but now I have to add file upload together.
Is it possible to submit form data such as text box and upload jpg in one ajax call?


<div class="row">
                <div class="col-fs-12">
                    <input type="file" />
                </div>
            </div>

$.ajax({
                                url: ApiName,
                                datatype: "text",
                                data:
                                {
                                    'blogid': blogID,
                                    'blogsubject': blogsubject,
                                    'blogbody': body.replace("'"," "),
                                    'createdby': '@System.Configuration.ConfigurationManager.AppSettings["MemberIDDefaultContentWriterName"]',
                                    'createdon': blogdate,
                                    'stage': blogStage,
                                    'actiontype': blogActionType,
                                    'blogurl': blogFileName,
                                    'memberid': '@System.Configuration.ConfigurationManager.AppSettings["MemberIDDefaultContentWriter"]',
                                    'blogtype': 'Event',
                                    'eventtype': eventType,
                                    'eventid': eventID,
                                    'eventIcon': eventIcon
                                },
                                type: "POST",
                                success: function (data) {
                                    var id = data.BlogID;
                                    alert("Update accordingly");
                                    //window.location.href = entireURL;
                                     },
                                error: function (error) {
                                    alert("Error " + error);
                                }
                            });

Open in new window

Comment
Watch Question

View Solution Only

ITsolutionWizard

Author

Commented:
Any help
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
Yes it is - you can use FormData to do this
https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

You can find many examples if you search for FormData AJAX

Try that and if you get stuck post back here with your code and a description of the issue.
ITsolutionWizard

Author

Commented:
Do u have Mvc example like how to pick up the file and data using Mvc controller?
ITsolutionWizard

Author

Commented:
any helps?
Julian Hansen
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Do u have Mvc example like how to pick up the file and data using Mvc controller?
Unfortunately I don't.

I would recommend opening a separate question for that in the .Net topic area.