Ajax表单提交图像时出错

Ajax表单提交图像时出错

问题描述:

当表单在同一页面上提交并且出现更改时,尝试进行AJAX编辑更改时出现困难,但图像引发错误:Undefined index: image in update.php on line 22 and 24。它拒绝传递这些值。Ajax表单提交图像时出错

表(editForm.php):

<div class="modal-content editDisplay"> 
<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> 
    <h4 class="modal-title" id="editModalLabel">Edit Item</h4> 
</div> 
<form class="editForm" method="post" enctype="multipart/form-data"> 
    <div class="modal-body"> 
     <div class="form-group"> 
      <label for="inputName">Name</label> 
      <input type="text" class="form-control" id="inputName" name="Product_Name" placeholder="Name" value="<?php echo $product ?>"> 
      <input type="hidden" name="oldProduct" value="<?php echo $oldProduct ?>"> 
     </div> 
     <div class="form-group"> 
      <label for="inputDescription">Description</label> 
      <textarea class="form-control" id="inputDescription" name="Description" placeholder="Description"><?php echo $description ?></textarea> 
     </div> 
     <div class="form-group"> 
      <label for="inputPrice">Price</label> 
      <input type="text" class="form-control" id="inputPrice" name="Price" placeholder="Price" value="<?php echo $price ?>"> 
     </div> 
     <div class="form-group"> 
      <label for="inputQuantity">Quantity</label> 
      <input type="number" class="form-control" id="inputQuantity" name="Quantity" placeholder="Quantity" value="<?php echo $quantity ?>"> 
     </div> 
     <div class="form-group"> 
      <label for="inputSalePrice">Sale Price</label> 
      <input type="text" class="form-control" id="inputSalePrice" name="Sale_Price" placeholder="Sale Price" value="<?php echo $salePrice ?>"> 
     </div> 
     <div class="form-group"> 
      <label for="inputImage">Image Upload</label><br> 
      <fieldset class="file-fieldset"> 
       <span class="btn btn-default btn-file"> 
        <span class="glyphicon glyphicon-upload"></span>&nbsp;&nbsp;Browse Browse <input name="image" type="file" id="inputImage"/><br> 
       </span> 
       <input type="hidden" name="prevPicture" value="<?php $image ?>"/> 
       <span style="margin-left:8px;" value=""><?php echo $image ?></span> 

      </fieldset> 
     </div> 
    </div> 
    <div class="modal-footer"> 
    <button type="reset" class="btn btn-default">Reset</button> 
    <button type="submit" class="btn btn-primary" id="saveButton" name="update">Save Changes</button> 
    </div> 
</form> 
</div> 

PHP(update.php):

<?php 

include('connection.php'); 
include('LIB_project1.php'); 

$productName = $_POST['Product_Name']; 
$productDescription = $_POST['Description']; 
$price = $_POST['Price']; 
$quantity = $_POST['Quantity']; 
$salePrice = $_POST['Sale_Price']; 
$oldImage = $_POST['prevPicture']; 
$oldProduct = $_POST['oldProduct']; 


//$productName = 'Jaime'; 
//$productDescription = 'This is crazy'; 
//$price = '0'; 
//$quantity = '12234'; 
//$salePrice = '0'; 
//$oldImage = $_POST['prevPicture']; 
//$oldProduct = $_POST['oldProduct']; 
$imageName= $_FILES['image']['name']; //TODO line 22 
echo ' The image is '.$imageName; 
$image_temp = $_FILES['image']['tmp_name']; // line 24 
echo 'Product name is: '.$productName; 

//$productName = 'Dodo Square'; 
//$productDescription = 'Flower on a Bee. Such Beauty!'; 
//$price = 9; 
//$quantity = 8; 
//$salePrice = 230; 
//$newImage = '038.jpg'; 
//$oldProduct = 'Times Square'; 

//working under the assumption that the image already exist in the database 
$targetDirectory = 'productImages'; 
$files = scandir($targetDirectory,1); 
//code passed 
for($i=0; $i<sizeof($files); $i++) 
{ 
    if($oldImage==$files[$i]) 
    { 
     unlink('productImages/'.$oldImage); 
    } 
} 

$target = "productImages"; 

//add the image to the directory 
$target = $target.'/'.$imageName; 
move_uploaded_file($image_temp,$target); 

updateProduct($conn,'product',':productName', ':productDescription', ':price', ':quantity', ':imageName', ':salePrice',       'Product_Name', 'Description', 'Price', 'Quantity', 'Image_Name', 'Sale_Price', $productName, $productDescription, $price, $quantity,$imageName, $salePrice, $oldProduct, ':oldProduct'); 
//header('location:admin.php'); 

?> 

的UpdateProduct(...)

/* 
* This is a function to update Product 
* 
*/ 
function updateProduct(PDO $connection,$table,$bindProductName, $bindProductDescription, $bindPrice, $bindQuantity, $bindImageName, $bindSalePrice,$productNameColumn, $productDescriptionColumn, $priceColumn, $quantityColumn, $imageNameColumn, $salePriceColumn,         $productName, $productDescription, $price, $quantity, $imageName, $salePrice, $oldProduct, $bindOldProduct) 
{ 
    $result = false; 

    $sql = 'UPDATE ' . $table . ' SET ' . $productNameColumn . ' = ' . $bindProductName . ',' . $productDescriptionColumn . ' = ' .       $bindProductDescription . ',' . $priceColumn . ' = ' . $bindPrice . ',' . $quantityColumn . ' = ' . 
     $bindQuantity . ',' . $salePriceColumn . ' = ' . $bindSalePrice . ',' . $imageNameColumn . ' = ' . $bindImageName . ' WHERE ' .      $productNameColumn . ' = ' . $bindOldProduct; 

    $smtp = $connection->prepare($sql); 
    $smtp -> bindParam($bindProductName, $productName); 
    $smtp -> bindParam($bindProductDescription, $productDescription); 
    $smtp -> bindParam($bindPrice, $price); 
    $smtp -> bindParam($bindQuantity, $quantity); 
    $smtp -> bindParam($bindImageName, $imageName); 
    $smtp -> bindParam($bindSalePrice, $salePrice); 
    $smtp -> bindParam($bindOldProduct, $oldProduct); 

    if($smtp->execute()) 
    { 
     $result = true; 
    } 

    return $result; 
} 

AJAX(显示编辑变化)问题:需要提交这些编辑变化

$(document).ready(function() 
{ 
      //the user click save edit 
    $(".edit").on("submit",function(e) 
    { 
     e.preventDefault(); 
     $.ajax({ 
      type:"POST", 
      url:'update.php', //I will put project id here as well 
      data:$(".editForm").serialize(), 
      success:function(smsg) 
      { 
       alert(smsg); 
       //update the number of items the user has in their shopping cart 
       $.get('admin.php',function(data){ 
       $('#refresh').load("admin.php #refresh"); 
        //alert('success'); 
       }); 
      } 
     }); 


    }); 


    }); 
+0

您的输入标记被破坏了 2014-10-04 19:35:11

+0

另外,这是什么'updateProduct($ conn,'product',':productName',':productDescription',':price',':quantity',':imageName',':salePrice','Product_Name','描述','Price','Quantity','Image_Name','Sale_Price',$ productName,$ productDescription,$ price,$ quantity,$ imageName,$ salePrice,$ oldProduct,':oldProduct');'?你也有你的绑定报价。如果您使用的是PDO,请删除绑定的引号。然而,真的很难说你的查询是或应该是什么。 – 2014-10-04 19:36:38

+0

感谢您的修复,但我仍然得到错误。 'updateProduct()'是在更新产品时重用的函数。 – TheAmazingKnight 2014-10-04 19:40:51

var inputImage = $("#inputImage"); 
var fd = new FormData(document.getElementById("editform")); 

fd.append("image", inputImage); 

$.ajax({ 
    url: "", 
    type: "POST", 
    data: fd, 
    processData: false, 
    contentType: false, 
    success: function(response) { 

    } 
}); 

,你需要得到整个形式发送之前的图像追加到它。我为asp.net做了这个,但它也适用于php。

+0

这是伎俩!谢谢 – TheAmazingKnight 2014-10-04 21:30:06

变化<input name="image" type="file" id="inputImage"/ to <input name="image" type="file" id="inputImage"/>

+0

已修复,但仍然是同样的问题。更新后。 – TheAmazingKnight 2014-10-04 19:45:03

+0

在更新中您需要其他功能 – 2014-10-04 19:47:37

+0

您能否详细说明一下? – TheAmazingKnight 2014-10-04 19:49:09

添加了一系列的测试,你的PHP,你会很快搞清楚自己。

您已经报警由PHP AJAX处理器文件发送的响应:

alert(smsg); 

所以,用它来解决/诊断,事情会出错。

首先测试可以在PHP文件的顶部放一个“我在这里”的消息 - 至少你知道ajax本身在工作。因此,修改前的update.php阅读:

<?php 
echo "Got to here"; 
die(); 

如果警报,再摆脱die(),并在文件中的各个地方回声出几个这样的测试。使用此方法来缩小错误的位置(在PHP文件中)。

回声出接收到的数据,让你知道什么是在未来修改update.php是:

$productName = $_POST['Product_Name']; 
$productDescription = $_POST['Description']; 
$price = $_POST['Price']; 
$quantity = $_POST['Quantity']; 
$salePrice = $_POST['Sale_Price']; 
$oldImage = $_POST['prevPicture']; 
$oldProduct = $_POST['oldProduct']; 

echo "$productName: " .$productName. " -- $productDescription: " .$productDescription. " - etc etc etc"; 
die(); 

我敢肯定你会相当快找到错误 - 肯定比撰写更快。详细SO问题,并等待答案...

祝你好运!默认情况下,图像不被您的文章中添加到形式

也许是因为图片永远不会通过ajax发送到服务器,所以$_FILES没有任何东西在'image'索引下。 看看how to do file upload using jquery serialization

或考虑使用FormData对象。