php - 文件上传按钮在翻转卡上不起作用
问题描述
我已经完成了 html 和 PHP 代码的文件上传器按钮,但是当我尝试测试它以查看它是否可以在浏览器中工作时,我从文件夹中选择了一个图像,然后我选择了我选择的任何图像,一旦我选择了“提交”翻转卡上什么也没出现,我不确定为什么什么也没出现
<!--flip card code.-->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<h1>Card Flip with Text</h1>
<h3>Hover over the image below:</h3>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
</div>
<div class="flip-card-back">
</div>
</div>
</div>
</body>
</html>
<!--Flip card code-->
<!-- File uploader button code-->
<html>
<body>
<form action="action_page.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="file">
<button type="submit" name="submit">UPLOAD</button>
</form>
</body>
</html>
<!--action_page.php code-->
<?php
if(isset($_POST["submit"])) {
$file = $_FILES['file'];
$fileName = $_FILES['file']['name'];
$fileTmpName = $_FILES['file']['tmp_name'];
$fileSize = $_FILES['file']['size'];
$fileError = $_FILES['file']['error'];
$fileType = $_FILES['file']['type'];
$fileExt = explode('.', $fileName);
$fileActualExt = strtolower(end($fileExt));
$allowed = array('jpg', 'jpeg', 'png', 'pdf');
if (in_array($fileActualExt, $allowed)){
if ($fileError === 0){
if($fileSize < 100000){
$fileNameNew = uniqid('', true).".".$fileActualExt;
fileActualExt;
$fileDestination = 'uploads/'.$fileNameNew;
move_uploaded_file(fileTmpName, $fileDestination);
header("Location: index.php?uploadsuccess");
} else {
echo "Your file is too big!";
}
} else {
echo "There was an error uploading your file";
}
} else {
echo "You cannot upload files of this type!";
}
}
?>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="/__/firebase/7.14.2/firebase-app.js"></script> <!--specifies the URL of an external script file-->
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="/__/firebase/7.14.2/firebase-analytics.js"></script> <!--specifies the URL of an external script file-->
<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script> <!--specifies the URL of an external script file-->
<script type="text/javascript" src="cordova.js"></script> <!--specifies the media type of the script-->
<script type="text/javascript" src="js/index.js"></script> <!--specifies the media type of the script--></body>
</html>
解决方案
除了“fileActualExt”之外,一切都很好!查看$fileNameNew
您忘记连接实际扩展名的位置。相反,您编写的 fileActualExt 就像一个常量。
正确的代码是$fileNameNew = uniqid('', true).".".$fileActualExt;
不要忘记在 action_page.php 文件所在的目录中创建上传文件夹。
<?php
if(isset($_POST["submit"])) {
$file = $_FILES['file'];
$fileName = $_FILES['file']['name'];
$fileTmpName = $_FILES['file']['tmp_name'];
$fileSize = $_FILES['file']['size'];
$fileError = $_FILES['file']['error'];
$fileType = $_FILES['file']['type'];
$fileExt = explode('.', $fileName);
$fileActualExt = strtolower(end($fileExt));
$allowed = array('jpg', 'jpeg', 'png', 'pdf');
if (in_array($fileActualExt, $allowed)){
if ($fileError === 0){
if($fileSize < 100000){
$fileNameNew = uniqid('', true).".".$fileActualExt; // concatination of uniqueid and fileActualExt
$fileDestination = 'uploads/'.$fileNameNew;
move_uploaded_file($fileTmpName, $fileDestination);
header("Location: index.php?uploadsuccess");
} else {
echo "Your file is too big!";
}
} else {
echo "There was an error uploading your file";
}
} else {
echo "You cannot upload files of this type!";
}
}
?>
推荐阅读
- javascript - 如何根据范围列表将分数映射到等级?
- javascript - 从 VUE JS 对象中多次删除项目
- python - Discord.py 按钮和下拉菜单,没有得到正确的库
- email - 标头的最大长度
- wordpress - wp设置和选项api的请求方法
- node.js - 如何在猫鼬模式中动态设置数字的最大属性
- javascript - Materialize CSS Sidenav 从屏幕底部打开
- java - 铃声停不下来
- node.js - 我正在制作一个 minecraft ping discord 机器人,当我的服务器离线时它会抛出这个错误
- python - 异步 http 的新手:如何解决这个问题?