Scribd
Upload
7 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
7 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

<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