使用基于ajax的客户端上传PHP文件不起作用

I have a form that uploads image to a certain path. I did not use this <form action="file.php"> upon submission of form, instead I used ajax for the submission of form. The data are successfully saved in the database including the filename but the image wasn't uploaded at all. What is the problem with this? How could I fixed this one? Thanks for the help. Here are my codes:

我有一个表单将图像上传到某个路径。我在提交表单时没有使用此

form.php

 <form method="post" name="new_category" id="product_category" enctype="multipart/form-data"> 
 <ul class="add_prod">
 <li>Category Title:<input type="text" name="category[title]" id="cat_title" value="" placeholder="Title" /> </li>
 <li>Category Description:<textarea rows="4" cols="40" name="category[description]"></textarea></li>
 <li>Category Image:<input type="file" name="image_file" id="cat_image" /></li>
 </ul>  
 </form>

file.js

$("#product_category").submit( function(){

    event.preventDefault();

   var data_category = $(this).serialize();
   var image = $("#cat_image").val();
   $.ajax({
       type: "post",
       url: "../wp-content/plugins/product_form/category_save.php",
       dataType: "json",
       data:data_category + "&image_file=" +image,
       success: function(data){
           if(data.notify == "Success"){
               console.log(data.notify);
           }
           else{
               console.log(data.notify);
           }
       } 

    });
 });

Save.php

<?php 
//establish connection
$con = mysqli_connect("localhost","root","","database"); 
//on connection failure, throw an error
if(!$con) {  
die('Could not connect: '.mysql_error()); 
} 

$folder = "../Dropbox/estacio/wp-content/plugins/product_form/img/";

if (is_uploaded_file($_POST['image_file']['tmp_name']))  {   
if (move_uploaded_file($_POST['image_file']['tmp_name'], $folder.$_POST['image_file']['name'])) {
     echo "File uploaded";
  } else {
     echo "File not moved to destination folder. Check permissions";
   }
  } else {
  echo "File is not uploaded.";
 } 



   //get the form elements and store them in variables
   $category_values = $_POST["category"]; 
   $image_url = basename($_POST["image_file"]);
   $image_field = "image_url";
   $data = array();

   //unset($view_all_info['Password2']);
   foreach($category_values as $field => $val){
    $data[] = "`".$field."` = '".$val."'";
   }

   array_push($data,"`".$image_field."` = '".$image_url."'");

   $sql = "INSERT INTO wp_product_category SET ".implode(',', $data);
   $ret = mysqli_query($con,$sql); 

   if($ret){
    $notification="Success";
   }
else{
  $notification="Failed";
   }

  echo json_encode(array('notify'=>$notification));

  mysqli_close($con);
 ?>

1 个解决方案

#1

try checking $_FILES['image_file']['tmp_name'] or $_FILES['cat_file']['tmp_name'] instead of $_POST, post is only giving you the filename as passed by the argument, not the actual uploaded content.

尝试检查$ _FILES ['image_file'] ['tmp_name']或$ _FILES ['cat_file'] ['tmp_name']而不是$ _POST,post只提供参数传递的文件名,而不是实际上传的内容。

also try adding action='category_save.php' to your form and using ajaxForm instead

还尝试将action ='category_save.php'添加到您的表单并使用ajaxForm代替

$("#product_category").ajaxForm(
{
dataType:'json',
success:function(json){
   console.log('success');
}
}).submit();

using different id and name tags for your input forms isn't very wise either.

为输入表单使用不同的id和name标签也不是很明智。

#1