无页面刷新无法上传文件

时间：2017-07-02 08:49:52

标签： php jquery ajax

我需要使用ajax上传文件而不刷新页面。 （我尝试使用表单元素，但它重定向到另一页。）

<!DOCTYPE html>
<html>
<head>
  <title> Test File Upload </title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

  <input type="file" name="file" id="file"><br><br>
  <button id="submitbtn"> Upload </button>

</body>
<script>
$(document).ready(function(){
  $("#submitbtn").click(function(){

    var property = document.getElementById('file').files[0];
    var formData = new FormData();

    formData.append("file", property);

    $.ajax({
      url: "AjaxPhp.php",
      type: "POST",
      data: formData,
      cache : false,
      contentType : false,
      processType : false,
      dataType: "json",
      success: function(testresponse){
        if(testresponse.success == true){
          alert(testresponse.messages);
        } else {
          alert(testresponse.messages);
        }
      }
    })
  });
});
</script>
</html>

这是我的php文件...请帮忙:)非常感谢你！

<?php
$con = mysqli_connect("localhost", "root", "", "learningdb") or die("connection failed");

if($_POST){

$target_dir = "testupload/";
$target_file = $target_dir . basename($_FILES["file"]["name"]);

if(move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)){

  $sql = "INSERT INTO uploadfile(image) VALUES ('$target_file')";
  mysqli_query($con, $sql);

  $valid['success'] = true;
  $valid['messages'] = "Successfully Uploaded!";
} else {
  $valid['success'] = false;
  $valid['messages'] = "Something went wrong...";
}
echo json_encode($valid);
}
?>

如何解决问题。使用Ajax进行文件上传，同时避免重新加载页面。

4 个答案:

答案 0 :(得分：0)

要实现此目的，请阻止正常提交表单 这样做：

$（ “＃submitbtn”）。单击（函数（E）{       即的preventDefault（）;

如果不起作用，
加：  返回false;

刚刚在Ajax结束后。

抱歉格式不佳。我正在通过手机打字

答案 1 :(得分：0)

  1. 在AjaxPhp.php文件中，使用isset其他明智的ajax将无效。

    if（isset（$ _ POST））{ //码 }

    2. 休息所有代码都没问题。只需添加isset即可解决问题

答案 2 :(得分：0)

@Christian jay Bringino这里是你如何解决这个问题的方法。 首先，当您使用var formData = new FormData();时，拥有<form>代码非常重要，因为我在这里使用查询submit事件。

其次不是processType : false,它实际上是processData : false,

这里是完全的答案

HTML CODE 

    <!DOCTYPE html>
<html>
<head>
  <title> Test File Upload </title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<form action="" method="post" id="file_form">
  <input type="file" name="file" id="file"><br><br>
  <input type="submit" name="submitbtn" id="submitbtn" value="upload">
</form>
</body>
<script>
$(document).ready(function(){
  $("#file_form").submit(function(e){
    e.preventDefault();
    var property = document.getElementById('file').files[0];
    var formData = new FormData($(this)[0]);

    formData.append("file", property);

    $.ajax({
      method: "POST",
      url: "AjaxPhp.php",
      data: formData,
      cache : false,
      contentType : false,
      processData : false,
      dataType:'json',
      success: function(testresponse){
        if(testresponse.success == true){
          alert(testresponse.messages);
        } else {
          alert(testresponse.messages);
        }
      }
    })
  });
});
</script>
</html>

PHP代码：AjaxPhp.php

坚持if($_POST)使用if($_FILES['file']['name'])

注意：如果您插入用户提供的数据，那么使用MYSQLI PREPARED STATEMENTS对抗sql注入，这里是链接click here。

答案 3 :(得分：0)

以下是我对@Christian jay Bringino添加的脚本所做的两个小改动，效果很好。

<!DOCTYPE html>
<html>
<head>
  <title> Test File Upload </title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

  <input type="file" name="file" id="file"><br><br>
  <button id="submitbtn"> Upload </button>

</body>
<script>
$(document).ready(function(){
  $("#submitbtn").click(function(){

    var property = document.getElementById('file').files[0];
    var formData = new FormData();

    formData.append("file", property);

    $.ajax({
      url: "AjaxPhp.php",
      type: "POST",
      data: formData,
      cache : false, 
      contentType : false,
      processData : false, //change processType to processData 
      dataType: "json",
      success: function(testresponse){
        if(testresponse.success == true){
          alert(testresponse.messages);
        } else {
          alert(testresponse.messages);
        }
      }
    })
  });
});
</script>
</html>

AjaxPhp.php（我没有这个数据库连接的表，所以我对它进行评论）

<?php
//$con = mysqli_connect("localhost", "root", "", "learningdb") or die("connection failed");

if(isset($_POST)){ //use isset

$target_dir = "testupload/";
$target_file = $target_dir . basename($_FILES["file"]["name"]);

if(move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)){

  /*$sql = "INSERT INTO uploadfile(image) VALUES ('$target_file')";
  mysqli_query($con, $sql);*/

  $valid['success'] = true;
  $valid['messages'] = "Successfully Uploaded!";
} else {
  $valid['success'] = false;
  $valid['messages'] = "Something went wrong...";
}
echo json_encode($valid);
}
?>
相关问题
最新问题