How can I upload and display file to html
Question
I'm trying to upload files to my html and display it, need something like an attachment, I choose my file (image,text,pdf,excel...) and display it.
I have already tried this code but it only show the text name I need something like it but also display content:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to create a File Upload Button.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.createElement("INPUT");
x.setAttribute("type", "file");
document.body.appendChild(x);
}
</script>
</body>
</html>
3 answers
solution1
1 2019-09-20 11:58:01
Your question isn't really clear, but for uploading a file you need a server-side language and If you want to show your uploaded file you have to send the file via AJAX to a server-side language (like PHP, Node.js, Python and etc.)
something like this:
<!DOCTYPE html>
<html>
<head>
<script>
function uploadFile(){
let file = document.getElementById("file1").files[0];
// alert(file.name+" | "+file.size+" | "+file.type);
let formdata = new FormData();
formdata.append("file1", file);
let ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "upload.php");
ajax.send(formdata);
}
function progressHandler(event){
//show upload progress
}
function completeHandler(event){
let tmp = document.getElementById('showImg');
tmp.style.backgroundImage = "url('"+tmp+"')"
}
function errorHandler(event){
//error handler
}
function abortHandler(event){
//abort handler
}
</script>
</head>
<body>
<form id="upload_form" enctype="multipart/form-data" method="post">
<input type="file" name="file1" id="file1"><br>
<input type="button" value="Upload File" onclick="uploadFile()">
<div id="showImg"></div>
</form>
</body>
</html>
upload.php:
$fileName = $_FILES["file1"]["name"]; // The file name
$fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["file1"]["type"]; // The type of file it is
$fileSize = $_FILES["file1"]["size"]; // File size in bytes
$fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true
if (!$fileTmpLoc) { // if file not chosen
echo "ERROR: Please browse for a file before clicking the upload button.";
exit();
}
if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")){
echo "test_uploads/$fileName";
} else {
echo "move_uploaded_file function failed";
}
Ps: Styling isn't really great in this example you can append an img tag or something else, It's just an example for you to understand the concept
Hope this helps you
solution2
0 2019-09-20 11:39:16
I have a resume on my personal site for example, its a PDF document.
I just linked to it with an anchor tag
<html>
<a href="docs/Resume.pdf" target="new">Resume</a>
</html>
Hope this helps. let me know if you have other questions and welcome to StackOverflow
solution3
0 2019-09-20 11:49:53
<html>
<head>
</head>
<body onload="init()">
<input id="file" type="file" name="file" />
<pre id="fileContent"></pre>
<script>
function init(){
document.getElementById('file').addEventListener('change', handleFileSelect, false);
}
function handleFileSelect(event){
const reader = new FileReader()
reader.onload = handleFileLoad;
reader.readAsText(event.target.files[0])
}
function handleFileLoad(event){
console.log(event);
document.getElementById('fileContent').textContent = event.target.result;
}
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.