Sending files using AJAX without FormData in Internet Explorer 9

Unfortunately, IE9 does not support FormData, making file uploads via XMLHttpRequest a more challenging task.

Is there a workaround for this issue? I've come across mentions of using iFrames, but the process seems complex and unclear on how to transfer files from the iFrame to the server.

Without relying on third-party libraries, is there a way to asynchronously upload files using plain JavaScript and without utilizing FormData?

Answer №1

If you're looking to handle file uploads in IE9 using XHR, this code snippet might be helpful. It involves creating a file input element within a form, adding credentials, submitting the form to an iframe, and retrieving the response.

Here's a breakdown of what the code does:

  1. Creates a file input dynamically
  2. Places the file selector inside a form
  3. Adds credentials to the form
  4. Submits the form to an iframe for uploading
// JavaScript code for file upload
fileSelection  = document.createElement("div");
// More code follows...

In the provided JavaScript code snippet, a file input element is created along with additional form elements to handle the file upload process. The function doUploadObjectUpload() handles the submission to an iframe while followUpOnHTML4Upload(frameId) can be used to process the server response.

After uploading, PHP, for example, can access uploaded files via the $_FILES global variable.

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

When using window.open in Chrome on a dual screen setup, the browser will bring the new window back to the

When using the API window.open to open a new window with a specified left position in a dual screen setup (screen1 and screen2), Chrome behaves differently than IE and FF. In Chrome, if the invoking screen is on the right monitor, the left position always ...

React failed to render the information fetched from an API following a GET request made in componentDidMount()

I recently implemented a function in my React code that calls an API and updates the state based on the data it receives. getUserList() { API.get('/userlist') .then(response => { this.setState({ userLis ...

Is it possible to retrieve the `arguments` objects if one of the parameters is named "arguments"?

This code snippet will output 1: (function (params) { console.log(params); }(1, 2)); The params object has replaced the default arguments. Can we retrieve the original arguments object within the function's scope? ...

Enhance autocomplete functionality by adding an additional parameter specific to Zend Framework

My form includes two fields: country club The club field is generated using the ZendX_JQuery_Form_Element_AutoComplete Element, which also creates this javascript code: $("#club").autocomplete({"url":"\/mywebsite\/\/mycontroller\/au ...

Mobile site experiencing slow scrolling speed

The scrolling speed on the mobile version of my website, robertcable.me, seems to be sluggish. Despite conducting thorough research, I have not been able to find a solution. I have attempted to address the issue by removing background-size: cover from my ...

Navigating state: (TypeError): The mapping function for this.state.[something] is invalid

I am currently working on iterating through my state, which contains data retrieved from an external API. However, I encountered this error message: TypeError: this.state.stocks.map is not a function My goal is to display the results on the frontend dyn ...

Listen up, Javascript keyboard input recorder

I am aiming for the search bar to pop up when you type. The code below is functioning, but I am facing an issue where the search bar pops up even when typing in a different input field, such as the comment input. Is it feasible for the search bar not to ...

Discover a JavaScript table using a for loop

Currently, I'm in the process of setting up a search bar within a table that has been populated by looping data retrieved from an API. My goal is to allow users to search for specific entries either by name or email. Unfortunately, I seem to be encoun ...

Start up a server using Angular along with Node.js and Express framework

I am encountering an issue with configuring Express as a server in my Angular application. The app loads without any issues when accessing the HOME route, but when trying to access another route, I receive an error message: Cannot GET / This is how I hav ...

Navigate to a particular section, initially gliding smoothly before suddenly lurching downwards on the screen

I am currently working on improving the functionality of my fixed navigation bar at the top of the screen. When a link in the nav bar is clicked, it scrolls to a specific section using this code: $('a[href^="#"]').bind('click.smoothscrol ...

Crafting an integrated REST API model with interconnected data

This question revolves around the implementation of a specific scenario rather than a problem I am facing. Let's say we have a User and a Resource, where a User can have multiple Resource but a Resource can have only 1 User. How should API endpoints b ...

Send nodejs express static request over to secure https server

Is there a way to ensure all HTTP requests, including those for static files, are redirected to HTTPS? This is the code I currently have: app.use(express.static(__dirname + '/public')); app.get('*', function(req, res) { if (!req. ...

Deactivating Touchable Opacity Sounds in React Native

Currently, I am in the process of developing an application, utilizing TouchableOpacity instead of a button. I am looking to disable the auditory feedback that occurs when the TouchableOpacity component is pressed. <TouchableOpacity activeOpacity={1} to ...

Turn off integrity verification for local dependencies in package-lock.json

Is there a way to bypass the integrity check for a local dependency in package-lock.json? Within my project repository, I have a core library along with two Angular applications that both rely on this core library as a dependency. The problem arises beca ...

Introduce an additional parameter to the Prestashop Cart entity

After setting up a radiobox "stock_action" in the Cart, I need to send its value to the Cart object for additional order costs. In the Cart Override, the $stock_action variable has been added: public $stock_action; /** * @see ObjectModel::$defi ...

Having some trouble getting my AJAX request to work in Ruby on Rails due to cross-origin issues. I've

(apologies for my poor English) I am facing an issue while trying to make an AJAX request due to the same-origin policy. My application is still in development and I am using Ruby on Rails 3.2.3 with a Unicorn server. The AJAX request is located in an ass ...

Debug errors occur when binding to computed getters in Angular 2

Currently, I am integrating Angular 2 with lodash in my project. Within my model, I have Relations and a specific getter implemented as follows: get relationsPerType() { return _(this.Relations) .groupBy(p => p.Type) .toPairs() ...

Attempting to design a form that will trigger a print dialog box displaying all the information entered in the form

I am currently working on developing a form that will allow users to input information such as Name, Age, Gender, Hobbies, Contact details, and Photo in order to create a resume. My goal is to build a simple local HTML-based application that generates a RE ...

When Highcharts and AngularJS team up, beware of the memory leak!

I've integrated highcharts into my AngularJS application using the highcharts-ng directive, but I'm encountering a persistent memory leak issue. My app is a slideshow with rotating slides that include charts. To investigate further, I created 3 ...

Converting PHP date format to JavaScript date format

I'm struggling to solve this problem $datetime = new Date().toLocaleString(); // returns current date in format 10/21/2021, 14:29:43 How can I generate the desired date format using JavaScript? The output should look like this: 2021-10-21 16:30:01 ...