Question

您好，作为我网站项目的一部分我正在编写项目输入表单，网站本身很简单，用户会：

写项目名称
选择一些值
在textarea中写项目描述
上传项目图片

页面将使用JS收集此信息，然后发送到PHP页面，在那里它将被检查，然后插入到数据库中。我不知道什么是错的代码--php页面没有给出errors--因为它不提交响应后，试图通过排除法解决，删除在JS图像部分似乎使按钮回应虽然没有输出给出。

<!DOCTYPE HTML>
<html>
<header>
<title>  Results </title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

</header>

<body>
<form method="post" enctype="multipart/form-data">
<fieldset>
<legend>Add item form.. </legend>
<p> fill out the below details </p>
<p> Item name will be publicly viewed by users: <input type="text" id="itemID" name="itemName" placeholder="Enter item name.." /> </p> 
location: 
<select id="locSelect"> //4 options for every select
    <option id="mountainID" value="mountain"> Mountain </option>


</select>

Category:
<select id="catSelect">
    <option id="appliancesID" value="appliances"> Appliances </option>

</select>

Price range:
<select id="rangeSelect">
    <option id="range1ID" value="range1"> 0-$50 </option>
</select>

<p> <input type="textarea" id="descriptionID" name="descriptionName" style="height:185px;width:400px;" placeholder="Please enter any item relevant info in this area..." /> </p>
<p> Upload Image: <input type="file" id="itemImageID" name="itemImage" /> </p>


<p> <input type="button" id="addID" name="add" value="Add item" onClick="runAdd();" /> </p>

</fieldset>
</form>

<div id="addResult"></div>
<script type="text/javascript">
function runAdd()
{
    var item = $("#itemID").val();

    var location = document.getElementById("locSelect"); //id of select
    var selectedLoc = location.options[location.selectedIndex].text;

    var category = document.getElementById("catSelect");
    var selectedCat = category.options[category.selectedIndex].text;

    var range = document.getElementById("rangeSelect");
    var selectedRange = range.options[range.selectedIndex].text;

    var textArea = document.getElementById("descriptionID").value;

    var itemImg = document.getElementById("itemImageID");

    $.post("itemDatabase.php", {
    itemDB: item,
    locationDB: selectedLoc,
    categoryDB: selectedCat,
    rangeDB: selectedRange,
    textareaDB: textArea,
    itemImgDB: itemImg  },

    function(data)
    {

        if(data == "int echoed by php page"){
            $("#addResult").html("item/text is blank..");
            //php will echo back to addResult <div> if input is not set
        }


       }
    );

}
</script>
</body>
</html>

我相信我正在发送textarea，错误地选择和映像部分，因为当它们为空时，php没有回复它们。我在线查找代码虽然它们与我的案例分开，通常只涉及AJAX或PHP。

<?php 
session_start(); //for userID, different page stores it
$connection = mysql_connect("localhost", "root", ""); 
$db = mysql_select_db("project_database");


if (isset($_POST['add'])){

if(empty(trim($_POST['itemDB']))) { // if(!($_POST['itemDB'])) not working
echo "0"; }
else { $item = mysql_real_escape_string($_POST['itemDB']); }


if(isset($_POST['locationDB'])){
$location = $_POST['locationDB'];
} else {
echo "1"; }

if(isset($_POST['categoryDB'])){
$category = $_POST['categoryDB'];
} else {
echo "2"; }

if(isset($_POST['rangeDB'])){
$range = $_POST['rangeDB'];
} else {
echo "3"; }

if(empty(trim($_POST['textareaDB']))) {
echo "4"; }
else { $description = mysql_real_escape_string($_POST['textareaDB']); }


if(getimagesize($_FILES['itemImgDB']['tmp_name']) == FALSE)
{
    echo "5";
}   
else 
{
$image = addslashes($_FILES['itemImgDB']['tmp_name']);
$image = file_get_contents($image);
$image = base64_encode($image); 
} 

$query = "INSERT INTO item (item_name, item_description, item_price_range,    item_img, item_location, user_id, category_id) VALUES ('".$item."', '".$description."', '".$range."', '".$image."', '".$location."',    '".$_SESSION["userID"]."', '".$category."')";
$itemAdded = mysql_query($query);
if($itemAdded) {
echo " Item " .$item. " has been added successfully "; }
else { echo " something went wrong "; }

}
?>

category_Id和user_id是外键，图像作为BLOB存储在数据库中（已检查的代码在不同的页面上工作）

我理解一些函数已被弃用，但这是我被指示完成任务的方式，我使用的是记事本。

我已经发布了大部分代码，以确保我理解错误或将来如何改进它，我感谢任何指示或提示只是为了让我走上正确的道路，所以我可以解决这个问题。< / p>

再次感谢您提前寻求帮助。

Answer 1

要回答关于通过AJAX上传图片的问题，以前这是不可能的，但现在可以通过FormData对象实现（但它是一个相对较新的功能，并且与旧版浏览器不兼容，如果这对您很重要）。< / p>

您可能要么单独上传图像（旧式），要么建议您使用FormData。

以下链接应该有用（我希望）：
https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

希望这会有所帮助：）

发布图片，通过Javascript

1 个答案: