How to add more data to HTML5 AJAX FormData object

Question

I am trying to add the page_id and page_slug to the loop so that when an image is uploaded the details page id and slug go to.

Normally I would use this: data: { page_id: page_id, page_slug: page_slug } But formData is there..

(function () {
var input = document.getElementById("images"), 
    formdata = false;
var page_id = $('#page_id').val();
var page_slug = $('#page_slug').val();


function showUploadedItem (source) {
    var list = document.getElementById("image-list"),
        li   = document.createElement("li"),
        img  = document.createElement("img");
    img.src = source;
    li.appendChild(img);
    list.appendChild(li);
}   

if (window.FormData) {
    formdata = new FormData();
    document.getElementById("btn").style.display = "none";
}

input.addEventListener("change", function (evt) {
    document.getElementById("response").innerHTML = "Uploading . . ."
    var i = 0, len = this.files.length, img, reader, file;

    for ( ; i < len; i++ ) {
        file = this.files[i];

        if (!!file.type.match(/image.*/)) {
            if ( window.FileReader ) {
                reader = new FileReader();
                reader.onloadend = function (e) { 
                    showUploadedItem(e.target.result, file.fileName);
                };
                reader.readAsDataURL(file);
            }
            if (formdata) {
                formdata.append("images[]", file);
            }
        }   
    }

    if (formdata) {
        $.ajax({
            url: "admin/pages/upload/",
            type: "POST",
            data: formdata,
            processData: false,
            contentType: false,
            success: function (res) {
                document.getElementById("response").innerHTML = res; 
            }
        });
    }
}, false);
}());

andyb · Accepted Answer · 2012-07-17 13:48:49Z

2

I do not think you can manipulate the FormData object directly inside the $.ajax or even $.ajaxSetup functions, so adding two calls to append in the following code block should include the required parameters.

if (window.FormData) {
  formdata = new FormData();
  formdata.append('page_id', page_id);
  formdata.append('page_slug', page_slug);
  document.getElementById("btn").style.display = "none";
}

The page_id and page_slug values are unique to so do not need appending in the loop; just once after creating the FormData object.

Please also see Using FormData objects for more examples.

answered Jul 17, 2012 at 13:48

andyb

43.9k12 gold badges126 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add more data to HTML5 AJAX FormData object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related