Scribd
Upload
3 views1 page

HTML Lang en

The document provides an HTML structure for a data import feature using Ajax with jQuery. It includes an input for file selection and a button to trigger the import process, which sends the selected file to a server endpoint via an Ajax POST request. The script handles success and error responses, updating the user interface accordingly.

Uploaded by

Sword Master
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views1 page

HTML Lang en

The document provides an HTML structure for a data import feature using Ajax with jQuery. It includes an input for file selection and a button to trigger the import process, which sends the selected file to a server endpoint via an Ajax POST request. The script handles success and error responses, updating the user interface accordingly.

Uploaded by

Sword Master
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Import using Ajax</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>

<input type="file" id="fileInput" />


<button id="importBtn">Import Data</button>

<div id="result"></div>

<script src="script.js"></script>
</body>
</html>

$(document).ready(function() {
$('#importBtn').on('click', function() {
// Get the selected file
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];

if (!file) {
alert('Please select a file.');
return;
}

// Create FormData object and append the file


var formData = new FormData();
formData.append('file', file);

// Perform Ajax request


$.ajax({
url: '/import-data', // Replace with your server endpoint
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function(response) {
$('#result').html('Import successful!');
console.log(response);
},
error: function(error) {
$('#result').html('Error importing data.');
console.error(error);
}
});
});
});

You might also like