我正在尝试将文件上传到我的 html 并显示它，需要类似附件的东西，我选择我的文件(图像、文本、pdf、excel...)并显示它。
我已经尝试过这段代码，但它只显示我需要的文本名称，但也显示内容:
<!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>
最佳答案
您的问题不是很清楚，但是要上传文件，您需要一种服务器端语言
如果你想显示你上传的文件，你必须通过 AJAX 将文件发送到服务器端语言(如 PHP、Node.js、Python 等)
像这样:
<!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>
上传.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";
}
P.s : 这个例子中的样式不是很好你可以附加一个 img 标签或其他东西，这只是一个例子让你理解这个概念
希望对你有帮助
关于javascript - 如何上传文件并将其显示为 html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58027600/