当我只上传一次时，图像在表格中插入了两次
Posted
技术标签:
【中文标题】当我只上传一次时，图像在表格中插入了两次【英文标题】：image is inserted twice in the table when i upload one time only 【发布时间】：2019-07-13 18:09:48 【问题描述】：这里我上传了两个代码，一个是 Index.php，另一个是 ImageUpload.php 当我上传图像时，文件被移动到上传文件夹并且图像名称两次存储在数据库中我只希望数据库中的一个数据用于我上传的每张图片都是数据库
images | int(11)
name | varchar(200)
image | longtext
<?php
include("config.php");
if(isset($_POST) && !empty($_FILES['image']['name']))
$valid_extensions = array('jpeg', 'jpg', 'png','pdf','doc','docx'); // valid extensions
$filepath = 'uploads/';
if(!is_dir($filepath))
mkdir($filepath, 0755, true);
$img = $_FILES['image']['name'];
$tmp = $_FILES['image']['tmp_name'];
list($txt, $ext) = explode(".", $img); // alternative $ext = strtolower(pathinfo($img, PATHINFO_EXTENSION));
$image_name = time().".".$ext;
$image_base64 =md5(rand());
$image = 'data:image/'.$image_name.';base64,'.$image_base64;
$query = "insert into images(name,image) values('".$image_name."','".$image."')";
mysqli_query($con,$query) or die(mysqli_error($con));
// Validate File extension
if(in_array($ext, $valid_extensions))
$filepath=$filepath.$image_name;
if(move_uploaded_file($tmp,$filepath))
echo "<img width='100px' src='".$filepath."'>";
else
echo "Failed to upload image on server";
else
echo 'Please upload valid image';
else
echo "Please select image to upload";
?>
<!DOCTYPE html>
<html>
<head>
<title>PHP Ajax image upload without refreshing page with validation</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<h2>PHP - Upload image on server with validation using jQuery Ajax</h2>
<div class="panel panel-info">
<div class="panel-heading">File upload using ajax in PHP</div>
<div class="panel-body">
<form action="imageUpload.php" enctype="multipart/form-data" class="form-horizontal" method="post">
<div class="preview"></div>
<input type="file" name="image" class="form-control" />
<br/>
<button class="btn btn-block btn-primary btn-upload" id="upload" name="upload">Upload</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function()
$(".btn-upload").click(function()
$(".form-horizontal").ajaxForm(target: '.preview').submit();
);
);
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：通过添加 e.preventDefault(); 禁用默认行为（需要您将事件 e 作为参数传递给您的匿名函数。
$(".btn-upload").click(function(e)
e.preventDefault();
$(".form-horizontal").ajaxForm(target: '.preview').submit();
);
【讨论】：
【参考方案2】：这是因为您的 ajax 请求运行了两次。只需在您的表单元素上添加onsubmit="return false;"。这样表单只通过ajax代码提交。
<form action="imageUpload.php" enctype="multipart/form-data" class="form-horizontal" method="post" onsubmit="return false;">
<div class="preview"></div>
<input type="file" name="image" class="form-control" />
<br/>
<button class="btn btn-block btn-primary btn-upload" id="upload" name="upload">Upload</button>
</form>
【讨论】：
返回 false 并不总是最好的。还有其他选项，例如阻止默认行为。 返回假；当你调用它时会做 3 件不同的事情： 1. event.preventDefault() - 它停止浏览器的默认行为。 2. event.stopPropagation() - 它防止事件传播（或“冒泡”）DOM。 3. 停止回调执行，调用时立即返回。 第二种解决方案是e.preventDefault(); :)以上是关于当我只上传一次时，图像在表格中插入了两次的主要内容，如果未能解决你的问题，请参考以下文章
当我在电子表格中插入图像然后将其转换为pdf时，我的应用程序脚本存在问题。该图像未出现在文档pdf中