仅一次上传时，将图像插入两次

在这里，我上传两个代码是index.php，另一个是imageupload.php，当我上传映像时，文件已移至上传loads文件夹，映像名称是数据库中的两次存储我只需要一个数据库中的每个图像，这是我上传的每个图像，这是数据库

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>

这是因为您的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();
});

相关内容

最新更新

热门标签：