Steps for making an AJAX request in JavaScript with both file and post data

What is the best way to create an HTTP request using JavaScript that sends a file and some post data to a PHP server?

I came across the following code snippet, but it appears to be incomplete.

xhr.open("POST", "upload.php");
var boundary = '---------------------------';
boundary += Math.floor(Math.random()*32768);
boundary += Math.floor(Math.random()*32768);
boundary += Math.floor(Math.random()*32768);
xhr.setRequestHeader("Content-Type", 'multipart/form-data; boundary=' + boundary);
var body = '';
body += 'Content-Type: multipart/form-data; boundary=' + boundary;
// more code here...

In order to make this work successfully, how do I include additional post data along with the file? I want to send a description text as well. It seems like I would need to use xhr.send to send the complete request...

javascriptajaxhttpfile-uploadxmlhttprequest

Answer №1

For sending additional POST data, it is recommended to include it as another Content-Disposition. Here's an example:

Content-Type: multipart/form-data; boundary=AaB03x

--AaB03x
Content-Disposition: form-data; name="submit-name"

Larry
--AaB03x
Content-Disposition: form-data; name="files"; filename="file1.txt"
Content-Type: text/plain

... contents of file1.txt ...
--AaB03x--

In this example, two variables are being sent: the file to be uploaded and an input with the name="submit-name" and value Larry. You can include multiple Content-Dispositions for each variable you want to POST.

If you want to simplify this process, consider using a JavaScript framework like jQuery. There is an excellent plugin available that can help with file uploads here.

Answer №2

Have you considered leveraging jQuery? It eliminates the need to create your own XHR requests from scratch.

Answer №3

As far as I know, sending files using XmlHttpRequest is not feasible.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Load content in three.js using JavaScript

In my three.js project or JavaScript, I want to preload contents with a loading bar. While I am familiar with using action-script to achieve this, I am struggling to do the same in JavaScript: Here is the code snippet: var loader = new THREE ...

javascriptjquerythree.js

Bootstrap 4: The mystery behind why the popover fails to appear inside a scrollable dropdown

Is there a way to replicate the behavior of Bootstrap 3 dropdowns with scrollbars on hover and popovers in Bootstrap 4? It seems that setting overflow:hidden; for scrolling functionality in dropdown menus also hides the popover. I have tried using containe ...

javascriptjquerycssbootstrap-4bootstrap-popover

Tabbed horizontal slider

I am trying to combine two scripts in order to create a tab-based system with a scrollbar located at the bottom of the content. I have merged the following Ajax tabs: with this slider: However, when I open the slider's tab, I am unable to move the s ...

javascriptjqueryajaxscrollbar

Java - Utilize PhantomJS to click on an element

I need help automating test cases headless with Selenium using Java. Despite trying methods described in this Stack Overflow post, I've run into an issue where simply clicking elements is not working with PhantomJS. Instead, a NullPointerException is ...

javascriptjavaseleniumnullpointerexception

What is the process of extracting a value from an array of objects based on another parameter?

Given the array below which contains objects with nested arrays, my goal is to retrieve the value 'AUS Eastern Standard Time' when 'Australia/Melbourne' is passed to the array. Although I attempted to use the code var winTimeZone = arr ...

javascriptarraysservicenow

Storing HTML content in a MySQL database using the MVC architectural pattern

I currently have a straightforward method that successfully posts a string to my MySQL server and saves the text without any issues. However, when I include a tag within the string, my google console displays an error stating that the page could not be f ...

javascriptjquerymysql

"Enhance your website with dynamic uploader forms and AJAX scripts - Railscast #383 shows you

I've successfully implemented the uploader functionality from Railscast #383, but I'm wondering if it's possible to dynamically add and remove the uploader link using ajax? Additionally, I'd need to include the "service" instance id wh ...

javascriptjqueryruby-on-railsajaxrailscasts

Ensuring scroll position remains fixed post screen rotation in HTML/Javascript

Is there a foolproof method to retain the scroll position in an HTML document following a screen rotation? While this issue is specifically in a Cocoa Touch UIWebView, it seems to be prevalent across different platforms. The standard practice appears to re ...

javascripthtmluiwebview

What is the best way to calculate the sum of table data with a specific class using jQuery?

If I had a table like this: <table class="table questions"> <tr> <td class="someClass">Some data</td> <td class="someOtherclass">Some data</td> </tr> <tr> <td class="s ...

javascriptjquery

My Node/Express application is failing to recognize updates made to my Pug view files

I have a Node/Express app that utilizes the Pug/jade template engine, and I am able to render everything successfully. However, I am facing an issue where modifications made to my index.pug file do not reflect on the homepage, even after restarting the ser ...

javascriptnode.jsexpresspug

Transforming a multi-dimensional array into a single level using Javascript

I'm currently faced with the challenge of converting a complex object array document into a single-level array. Here's an example: const data = [ { "id": 1, "name": "Beauty", "childre ...

javascriptreactjsarraysobjectecmascript-6

Is it possible to make the v-toolbar-title fixed within a v-navigation-drawer using Vuetify?

Can the <v-toolbar-title> be fixed within a <v-navigation-drawer>? <v-card class="d-inline-block elevation-12"> <v-navigation-drawer hide-overlay permanent stateless height="440" value="true"> <v-toolbar color="whi ...

javascriptcssvue.jsvuetify.js

A guide to converting variables into a JSON Object in Javascript

I am looking for a way to insert external variables into a JSON object. An example of what I want: var username = "zvincze"; And then, using that variable to inject it into a JSON object: var json = '{"username":"VARIABLE_GOES_HERE"}' var obj ...

javascriptjsonvariables

Guide to importing a glTF scene into your three.js project while using Internet Explorer 11

After successfully implementing a simple html code to load a gltf model using three.js and their gltfloader.js, I encountered an issue where it works flawlessly on Mozilla but fails to display on ie11 without any errors being thrown. Despite trying the es6 ...

javascriptinternet-explorerthree.jsinternet-explorer-11gltf

What are some solutions for resolving the npm error code elifecycle issue?

After following the documentation, I successfully installed React JS but encountered an error when trying to run the app. The error code displayed was elifecycle npm err errno 1. Can someone please assist me in resolving this issue? Additionally, it's ...

javascriptnode.jsreactjsnpmnpm-start

Is it possible to meta-refresh a page for redirection?

When creating a webpage, I included a META tag like this: <META http-equiv="refresh" content="5;URL=http://www.google.com"> The issue is that mobile browsers do not support this meta tag. It redirects properly on web browsers, but not on mobile dev ...

javascriptphphtmlmeta-tags

What sets a module apart from a script?

As I delve into the depths of TypeScript documentation to grasp the concept of modules, particularly ES6 modules, I stumbled upon some interesting insights. typescript-modules - this documentation talks about typescript modules and highlights an important ...

javascripttypescriptes6-modules

Combine consecutive <p> tags within a <div> container

Can you group all adjacent <p> elements together within a <div> element? For example, assuming the following structure: <div class="content"> <p>one</p> <p>two</p> <h2> not p</h2> <p>thr ...

javascriptjqueryhtmldom

Utilize a CSS selector to target all deleted nodes using the MutationObserver in the HTML5 API

Is there a way to retrieve all removed nodes from the DOM that have specific classes using CSS selectors? Below is an example of how it can be done with some complexity, but is there a simpler and more general approach? new MutationObserver(mut =& ...

javascripthtmlcssmutation-observers

JQuery AJAX success callback firing twice unexpectedly (using jQuery version 3.5.1)

Can you help me figure out why the success event in this code is sometimes triggered twice at random times? The issue seems to be that instead of deleting only one row, multiple rows are deleted at once. $(document).ready(function(){ $(document).on(&apos ...

phpjqueryajax