How to upload files using HTML to website ?

How to upload file without form using JavaScript ?

Last Updated : 12 Jul, 2021

There are several approaches to upload a file without using the form in JavaScript:

Approach 1: This approach is to use FormData that can upload a file without using any kind of form. The special thing about this is that network methods, such as fetch, can accept a FormData object as a body. It’s encoded and sent out with Content-Type — multipart/form-data.

JavaScript Snippet:

JavaScript

var gfg = new FormData();

gfg.append('pictureFile', 
        pictureInput.files[0]);

// upload.php is the file to be uploaded
$.ajax({
    url: 'upload.php',
    type: 'POST',
    processData: false,
    contentType: false,
    dataType: 'json',
    data: gfg
});

Approach 2: This approach is to use XMLHTTPRequest that can directly upload the file as the content inside the body of POST request.

JavaScript Snippet:

JavaScript

// JavaScript Code
var form = document.getElementById('the-form');

form.onsubmit = function () {
    var formData = new FormData(form);
    formData.append('file', file);
    var xhr = new XMLHttpRequest();

    // Add any event handlers here...
    xhr.open('POST', form.getAttribute('action'), true);
    xhr.send(formData);

    // To avoid actual submission of the form
    return false; 
}

Approach 3: This approach is to use simpleUpload plugin.

HTML Code Snippet:

HTML

<!DOCTYPE html>
<html>

<body>
    <h2>Welcome To GFG</h2>

    <input type="file" name="arquivo" 
        id="simpleUpload" multiple>
    
        <button type="button" id="upload">
            Upload
        </button>
</body>

</html>

JavaScript Snippet:

JavaScript

$('#simpleUpload').simpleUpload({

    // upload.php is the file
    // to be uploaded
    url: 'upload.php',
    trigger: '#upload',
    success: function (data) {
        alert('Successfully Uploaded');
    }
});

Output:

How to upload files using HTML to website ?

S

sankalpsharma424

Improve

Article Tags :

Similar Reads

How to Upload Files in JavaScript?

We upload files using JavaScript, for this we have to capture form elements, gather information from FormData for easier file uploads, intercept submission events, and utilize Fetch API for asynchronous server requests, for enhanced user experience and efficient data handling. ApproachProject Setup:

How to get the file name from page URL using JavaScript ?

JavaScript provides multiple techniques for string manipulation and pattern matching. By demonstrating various methods, the article equips developers with versatile solutions to dynamically retrieve and utilize file names from different URL formats within their applications. There are several approa

How to upload files using HTML to website ?

Every file that needs to be uploaded to the website, required the basic form which facilitates uploading. This feature is essential when we are filling out the form on a specific website. This file upload may support a variety of file formats along with various types of files. The file uploading fea

File Type Validation while Uploading it using JavaScript

File type validation is essential for web applications that allow users to upload files. By checking the file extension on the client side using JavaScript, you can provide a smooth and efficient user experience by quickly notifying users if their file isn't supported. This method is often preferred

How to Upload File with Progress Bar using Node.js ?

Uploading files in NodeJS involves transferring files from the client's location to the server's location. A progress bar is a visual component that displays the percentage of the total file upload. In this tutorial, we will create a local server and demonstrate how to upload files to a destination

How to read a local text file using JavaScript?

Reading a local text file involves accessing the contents of a file stored on a user's device. Using JavaScript, this can be achieved with the HTML5 File API and the FileReader object, which reads files selected through an <input> element or drag-and-drop, asynchronously. Getting Started with

How to upload an image using HTML and JavaScript in firebase ?

Firebase is a product of Google which helps developers to build, manage, and grow their apps easily. It helps developers to build their apps faster and in a more secure way. No programming is required on the firebase side which makes it easy to use its features more efficiently. It provides cloud st

How to Upload File using formidable module in Node.js ?

A formidable module is used for parsing form data, especially file uploads. It is easy to use and integrate into your project for handling incoming form data and file uploads.ApproachTo upload file using the formidable module in node we will first install formidable. Then create an HTTP server to ac

How to Disable Submit Button on Form Submit in JavaScript ?

Forms are a crucial part of web development as they allow users to submit data to a server. However, sometimes we want to customize the behavior of HTML forms and prevent the default behavior from occurring. This allows you to create a more interactive and user-friendly web application. In this arti

How to Display Word Document in HTML using JavaScript?

Displaying Word documents in HTML is a valuable feature for web applications, enabling users to view content without needing to download files. JavaScript provides several tools and libraries to facilitate this process, making it easier to convert and render .docx files directly in the browser. This