ChatGPT解决这个技术问题 Extra ChatGPT

Uploading both data and files in one form using Ajax?

I'm using jQuery and Ajax for my forms to submit data and files but I'm not sure how to send both data and files in one form?

I currently do almost the same with both methods but the way in which the data is gathered into an array is different, the data uses .serialize(); but the files use = new FormData($(this)[0]);

Is it possible to combine both methods to be able to upload files and data in one form through Ajax?

Data jQuery, Ajax and 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>

Files jQuery, Ajax and 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>

How can I combine the above so that I can send data and files in one form via Ajax?

My aim is to be able to send all of this form in one post with Ajax, is it possible?

<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>
The FormData approach should work fine with forms that contain whatever you want, not just the file upload fields; it is not widely supported though.
@lanzz which though? the one with serialize seems to work only for data but the other seems only to work for files?
Judging by this MDN page, all form data should be submitted when you use FormData
@lanzz you are right, it works how I thought it should be I was using the wrong form id, you can upload both files and data via one form with ajax.
This seem not to work when there is multi-select file input. It only uploads the first file.

D
Dan

The problem I had was using the wrong jQuery identifier.

You can upload data and files with one form using ajax.

PHP + HTML

<?php

print_r($_POST);
print_r($_FILES);
?>

<form id="data" 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>

jQuery + Ajax

$("form#data").submit(function(e) {
    e.preventDefault();    
    var formData = new FormData(this);

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

Short Version

$("form#data").submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);    

    $.post($(this).attr("action"), formData, function(data) {
        alert(data);
    });
});

in versions of IE < 10 this solution will not work, as FormData is an HTML5 object, not present in IE 8 or 9.
$(this)[0] is just an alias of this, so new FormData(this) should be sufficient.
It doesn't seem to be possible to inspect the FormData Object, see this question (for anyone running into the same cluelessness as I just did because the Object was always empty).
For future readers: the contentType and processData declarations are important. See this answer for more information.
the async: false does not seem required for this to work and causes blocking on mobile (single threaded) browsers
R
Roey

another option is to use an iframe and set the form's target to it.

you may try this (it uses jQuery):

function ajax_form($form, on_complete)
{
    var iframe;

    if (!$form.attr('target'))
    {
        //create a unique iframe for the form
        iframe = $("<iframe></iframe>").attr('name', 'ajax_form_' + Math.floor(Math.random() * 999999)).hide().appendTo($('body'));
        $form.attr('target', iframe.attr('name'));
    }

    if (on_complete)
    {
        iframe = iframe || $('iframe[name="' + $form.attr('target') + '"]');
        iframe.load(function ()
        {
            //get the server response
            var response = iframe.contents().find('body').text();
            on_complete(response);
        });
    }
}

it works well with all browsers, you don't need to serialize or prepare the data. one down side is that you can't monitor the progress.

also, at least for chrome, the request will not appear in the "xhr" tab of the developer tools but under "doc"


Indeed it is not Ajax, still can be useful to people with the same question.
I just can't believe why this answer get -2, I ended up using this as I needed legacy browser Support
This answer should be in the thread as other answers notes 'older browsers dont work' or 'iframe hack could be used' but never addresses them. Nice piece of code, also showing how to use onload correctly +1
h
h_power11

I was having this same issue in ASP.Net MVC with HttpPostedFilebase and instead of using form on Submit I needed to use button on click where I needed to do some stuff and then if all OK the submit form so here is how I got it working

$(".submitbtn").on("click", function(e) {

    var form = $("#Form");

    // you can't pass Jquery form it has to be javascript form object
    var formData = new FormData(form[0]);

    //if you only need to upload files then 
    //Grab the File upload control and append each file manually to FormData
    //var files = form.find("#fileupload")[0].files;

    //$.each(files, function() {
    //  var file = $(this);
    //  formData.append(file[0].name, file[0]);
    //});

    if ($(form).valid()) {
        $.ajax({
            type: "POST",
            url: $(form).prop("action"),
            //dataType: 'json', //not sure but works for me without this
            data: formData,
            contentType: false, //this is requireded please see answers above
            processData: false, //this is requireded please see answers above
            //cache: false, //not sure but works for me without this
            error   : ErrorHandler,
            success : successHandler
        });
    }
});

this will than correctly populate your MVC model, please make sure in your Model, The Property for HttpPostedFileBase[] has the same name as the Name of the input control in html i.e.

<input id="fileupload" type="file" name="UploadedFiles" multiple>

public class MyViewModel
{
    public HttpPostedFileBase[] UploadedFiles { get; set; }
}

You are a time saver.:)
In my case I had to use: contentType : "application/octet-stream"
Thanks buddy! You saved lot of time.
Thanks mate! The below 2 lines worked for me. var form = $("#Form"); var formData = new FormData(form[0]);
e
emix

Or shorter:

$("form#data").submit(function() {
    var formData = new FormData(this);
    $.post($(this).attr("action"), formData, function() {
        // success    
    });
    return false;
});

so with this, how do you validate a data field using the same script, that is if you have a text field and a file field in your form
A
Adithya Upadhya

EDIT: with the new version of JQuery (3.6), you could also try using contentType function argument instead of enctype. Try contentType: multipart/form-data.

For me, it didn't work without enctype: 'multipart/form-data' field in the Ajax request. I hope it helps someone who is stuck in a similar problem.

Even though the enctype was already set in the form attribute, for some reason, the Ajax request didn't automatically identify the enctype without explicit declaration (jQuery 3.3.1).

// Tested, this works for me (jQuery 3.3.1)

fileUploadForm.submit(function (e) {   
    e.preventDefault();
    $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            enctype: 'multipart/form-data',
            data: new FormData(this),
            processData: false,
            contentType: false,
            success: function (data) {
                console.log('Thank God it worked!');
            }
        }
    );
});

// enctype field was set in the form but Ajax request didn't set it by default.

<form action="process/file-upload" enctype="multipart/form-data" method="post" >
     
     <input type="file" name="input-file" accept="text/plain" required> 
     ...
</form>

As others mentioned above, please also pay special attention to the contentType and processData fields.


"For me, it didn't work without enctype: 'multipart/form-data' field in the Ajax request." — That can't have had any effect. It isn't a property recognised by jQuery.ajax. See the documentation where enctype isn't mentioned at all.
Like I mentioned before, I tried multiple different answers but they failed to work. An Ajax error stating encoding error was shown in the JS console. Later I followed this tutorial which finally made my code work and I posted it here. Perhaps, enctype field is not covered in the documentation for a reason. I haven't checked jQuery source code so I cannot say with certainty.
"Perhaps, enctype field is not covered in the documentation for a reason." — That reason is that jQuery doesn't do anything with it so it is nonsense.
Perhaps you could contact Mkyong and have a conversation with him instead. I tested my code again by removing the enctype field and it no longer uploads files (encoding type error returns). I'm not sure how that works since I haven't checked the jQuery source code. I posted this answer with the intention of helping others who are stuck in a similar problem. I'm not fishing for upvotes here... If you have further questions/comments, let's chat instead of commenting.
k
kartik tyagi

A Simple but more effective way:
new FormData() is itself like a container (or a bag). You can put everything attr or file in itself. The only thing you'll need to append the attribute, file, fileName eg:

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

and just pass it in AJAX request. Eg:

    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')
        }
    })

You can append n number of files or data with FormData.

and if you're making AJAX Request from Script.js file to Route file in Node.js beware of using
req.body to access data (ie text)
req.files to access file (ie image, video etc)


G
GetoX

Just to remind, in 2022 you don't need to use jquery. Try js standard Fetch API

    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);
    });

V
Vivaan

The code below works for me

$(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);
});

In your Action Post Method, pass parameter as HttpPostedFileBase UploadFile and make sure your file input has same as mentioned in your parameter of the Action Method. It should work with AJAX Begin form as well.

Remember over here that your AJAX BEGIN Form will not work over here since you make your post call defined in the code mentioned above and you can reference your method in the code as per the Requirement

I know I am answering late but this is what worked for me


k
keivan kashani

This is a solution that I implemented

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;
 }
 });

n
ndarriulat

In my case I had to make a POST request, which had information sent through the header, and also a file sent using a FormData object.

I made it work using a combination of some of the answers here, so basically what ended up working was having this five lines in my Ajax request:

 contentType: "application/octet-stream",
 enctype: 'multipart/form-data',
 contentType: false,
 processData: false,
 data: formData,

Where formData was a variable created like this:

 var file = document.getElementById('uploadedFile').files[0];
 var form = $('form')[0];
 var formData = new FormData(form);
 formData.append("File", file);

contentType: "application/octet-stream", is actively harmful and the only reason it doesn't cause a problem is because you overwrite it two lines later.
enctype: 'multipart/form-data', is pointless. jQuery.ajax doesn't recognise that paramater.
… the rest of your answer fails to cover the "data" bit of "data and files" from the question title.
r
ryuhk

you can just append them on your formdata, add your files and datas in it.you can read this..

https://developer.mozilla.org/en-US/docs/Web/API/FormData/append

for better understanding. you can separately retrieve them $_FILES for your files and $_POST for your data.


Y
Yang Yu
<form id="form" method="post" action="otherpage.php" 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 type='button' id='submit_btn'>Submit</button>
</form>

<script>
$(document).on("click", "#submit_btn", function (e) {
    //Prevent Instant Click  
    e.preventDefault();
    // Create an FormData object 
    var formData = $("#form").submit(function (e) {
        return;
    });
    //formData[0] contain form data only 
    // You can directly make object via using form id but it require all ajax operation inside $("form").submit(<!-- Ajax Here   -->)
    var formData = new FormData(formData[0]);
    $.ajax({
        url: $('#form').attr('action'),
        type: 'POST',
        data: formData,
        success: function (response) {
            console.log(response);
        },
        contentType: false,
        processData: false,
        cache: false
    });
    return false;
});
</script>

///// otherpage.php

<?php
    print_r($_FILES);
?>