javascript - 上传的图片没有返回到 PHP
问题描述
我正在尝试制作用于编辑产品的表单,但如果我上传图片,我的 PHP 代码无法找到该图片,它会引发此错误:
注意:未定义索引:第 10 行 C:\xampp\htdocs\pages\shopmanager\admin\producteditor.php 中的图像
注意:未定义索引:第 11 行 C:\xampp\htdocs\pages\shopmanager\admin\producteditor.php 中的图像上传失败
这是我的代码:
$db = new Database;
$product = mysqli_fetch_array($db->db_query("SELECT * FROM product WHERE ID = '" . $_GET['id'] . "'"));
$image = mysqli_fetch_array($db->db_query("SELECT name,src FROM images WHERE id =".$product['image-id']));
$category = $db->db_query("SELECT * FROM category");
$productcat = mysqli_fetch_array($db->db_query("SELECT `cat-id` FROM `category-product` WHERE `prod-id` = ".$product['ID']));
if(isset($_POST['submit'])){
$uploaddir = '/../../../src/images/';
$uploadfile = $uploaddir . basename($_FILES['image']['name']);
if (move_uploaded_file($_FILES['image']['tmp_name'], $uploadfile)) {
echo "File is valid, and was successfully uploaded.\n";
} else {
echo "Upload failed";
}
}
?>
<!--page content-->
<div class="col-9">
<div style="background-color:#c6c8ca !important; color:black" class="jumbotron">
<div class="container">
<form class="well form-horizontal" action="producteditor.php?id=<?= $_GET['id'] ?>" method="post"
id="producteditor_form">
<fieldset>
<!-- Upload image input-->
<input id="upload" name="image" type="file" onchange="readURL(this);"
class="form-control border-0" accept="image/*" hidden>
<div class="input-group-append">
<label for="upload" class="btn btn-light m-0 rounded-pill px-4"> <i
class="fa fa-cloud-upload mr-2 text-muted"></i><small
class="text-uppercase font-weight-bold text-muted"> Kies
bestand</small></label>
</div>
<!-- Uploaded image area-->
<div class="image-area mt-4"><img id="imageResult"
src="../../../<?=$image['src']?>" alt="<?=$image['name']?>"
class="img-fluid rounded shadow-sm mx-auto d-block">
</div>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<div class="text-center">
<button class="btn btn-lg btn-success form-spacing-top"
name="submit">Opslaan</button>
</div>
</div>
</fieldset>
</form>
</div>
</div><!-- /.container -->
</div>
</div>
<div class="col"></div>
</div>
</div>
<script>
/* ==========================================
SHOW UPLOADED IMAGE
* ========================================== */
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imageResult')
.attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
$(function() {
$('#upload').on('change', function() {
readURL(input);
fetch(url, {
method: 'POST',
body: readURL(input)
});
});
});
/* ==========================================
SHOW UPLOADED IMAGE NAME
* ========================================== */
var input = document.getElementById('upload');
var infoArea = document.getElementById('upload-label');
input.addEventListener('change', showFileName);
function showFileName(event) {
var input = event.srcElement;
var fileName = input.files[0].name;
infoArea.textContent = 'File name: ' + fileName;
}
</script>
解决方案
您<form>
需要具有该enctype='multipart/form-data'
属性。
推荐阅读
- javascript - Reactjs(javascript)我怎么看不到列表为空(之前)api被调用
- angular - 部署时某些路由中不存在“Access-Control-Allow-Origin”标头
- ios - SwiftUI:处理导航和 UINavigationController 的等效方法
- sql-server - SQL Server:设计器不兼容的生成脚本
- javascript - “邮递员 - 如何同时检查任何键的类型是‘字符串’还是‘空’”
- android - 准备 SDK 包 Android Emulator 时出错:无法下载
- openssl - 无法在 centOs 中降级 openssl-libs
- verilog - 在 Verilog 中使用 SR 触发器模块创建 JK 触发器模块
- f# - 引用被本地模块类型遮蔽的顶级类型
- java - JFreeChart:条形图 X 轴标签与大型数据集重叠