Home > Article > Web Front-end > How to upload a file without a form using JavaScript?

How to upload a file without a form using JavaScript?

PHPzforward: 2023-09-09 23:45:031345browse

如何使用 JavaScript 上传没有表单的文件？

Sometimes, developers may need to upload files without using JavaScript forms. Normally, we create a form to get data and files from the user, but in this tutorial, we will learn to get the files from the user without a form and send it to the backend.

Using FormData() objects and Ajax requests

The FormData object allows us to store form data in key-value pairs. We need to use constructor to initialize variables. We can allow the user to upload a file using HTML input and store that file in the form data. We can then send the form data to the backend.

grammar

Users can use the FormData() object and ajax request according to the following syntax to upload files without using a form.

form_data.append("file", uploadedFile);
$.ajax({
   url: "URL",
   method: "POST",
   data: form_data,
});

In the above syntax, we use the append() method to add a file to the form data object. Additionally, we use ajax() to send data to the API.

Example

In the example below, we have created a file input in HTML using the tag. In JavaScript, whenever a user uploads a file, we access it and add it to the form_data object.

After that, we use ajax to send the file to the API via POST request.

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
   <h3>Using the <i>FormData object and ajax request</i> to upload a file without using the form data in JavaScript</h3>
   <input type = "file" name = "file" id = "file_input" />
   <div id = "content"> </div>
   <script>
      $(document).on('change', '#file_input', function () {
         let uploadedFile = document.getElementById('file_input').files[0];
         var form_data = new FormData();
         form_data.append("file", uploadedFile);
         $.ajax({
            url: "URL",
            method: "POST",
            data: form_data,
         });
      });
   </script>
</body>
</html>

Use jQuery simple upload plug-in

jQuery includes a simple upload plugin that we can use to send files to the API. We need to add the CDN of the simple upload plugin to the

section to use it. If a developer is using the application, they can use NPM commands to install the package.

grammar

Users should follow the following syntax to upload form-less files using JavaScript using the jQuery Simple Upload plugin.

$(this).simpleUpload("URL", {
   start: function (file) {
      
      //upload started
   },
});

In the above syntax, we call the simpleUpload() function of the simple upload plug-in to upload files.

Example

In the example below, we added the path to the simpleUpload.min.js file in the

section. We added a "change" event on the file input. In the callback function, we call the simpleUpload() function with the file input as reference. We pass this object as the second parameter of the simpleUpload() function with the key and callback function as values.

<html>
<head> 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
   <script src= "https://cdn.jsdelivr.net/npm/jquery-simpleupload@1.1.0/simpleUpload.min.js"> </script>
</head>
<body>
   <h3>Using the <i>jQuery simple upload</i> plugin to upload the file without using the form</h3>
   <input type = "file" name = "file" id = "file_input">
   <div id = "content"> </div>
   <script>
      $('#file_input').change(function () {
         $(this).simpleUpload("abcd.php", {
            start: function (file) {
               
               //upload started
               content.innerHTML = "upload started";
            },
         });
      });
   </script>
</body>
</html>

Users learned two different ways to upload files without using forms in JavaScript. We used FormData object and ajax() method in the first method. In the second method, we used Jquery's simple upload plugin.

The above is the detailed content of How to upload a file without a form using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery ajax html npm 构造函数回调函数 append JS 对象事件

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to create a canvas with a Circle using FabricJS?Next article：How to create a canvas with a Circle using FabricJS?

See more

How to upload a file without a form using JavaScript?

Using FormData() objects and Ajax requests

grammar

Example

Use jQuery simple upload plug-in

grammar

Example

Related articles