i am sending input file from one page to another, how can i send file data from abc.html to ac.html
1)abc.html
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script></head><body>
<div>
<form action="adc.html">
<input type="file" name="file" id="file12">
<input type="submit" >
</form>
</div>
<script>
$('form').on('click',function(){
$(this).serialize();
})
</script>
how can i fetch and show file data to ac.html file
2)ac.html
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script></head><body>
<div id="poemdisplay"></div>
<script src="module">
var poemDisplay=getElementById('poemdisplay')
fetch(url).then(function(response) {response.text().then(function(text) {
poemDisplay.textContent = text;});});
</script></body></html>
}
<input>typefileelement'svalueis the name of the file, you can access the file using thefilesproperty. You may be able to read the file client side and append its content to the URL query but there are more conventional ways to do what you're trying to do and they all involve a server.