Javascript 当我只上载一次时，图像会在表中插入两次

这里我上传了两个代码，一个是Index.php，另一个是ImageUpload.php，当我上传图像时，文件被移动到uploads文件夹，图像名称被存储在数据库中两次，我只希望我上传的每个图像的数据库中有一个数据，这是数据库

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";
}

?>

images | int（11）
姓名| varchar（200）
图像|长文本

PHP Ajax图像上传，无需刷新页面并进行验证
PHP-使用jQueryAjax在服务器上上载图像并进行验证
在PHP中使用ajax上传文件


上传
$（文档）.ready（函数（）{
$（“.btn上载”）。单击（函数（）{
$（“.form horizontal”）.ajaxForm（{target:'.preview'}）.submit（）；
});
}); 

这是因为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>

上传

通过添加

e.preventDefault（）禁用默认行为

（需要将事件

e

作为参数传递给匿名函数

$(".btn-upload").click(function(e) {
    e.preventDefault();
    $(".form-horizontal").ajaxForm({target: '.preview'}).submit();
});

---

返回false并不总是最好的。还有其他选项，例如防止默认行为。返回false；在调用它时会执行3项不同的操作：1.event.preventDefault（）–它停止浏览器的默认行为。2.event.StopperPogation（）–它防止事件传播（或“冒泡”）DOM.3.停止回调执行并在调用时立即返回。第二个解决方案是

e.preventDefault（）；

：）