个人中心
gpt4 book ai didi

javascript - 无法使用 HTML5 PHP 和纯 ajax 上传图像

转载 作者：行者123 更新时间：2023-12-03 10:41:18 25 4
gpt4 key购买 nike

我创建了一个 php 表单，它通过文本框和 1 个 HTML 输入类型 FILE 接受很少的值，但我的文本框数据存储到数据库中，而我的文件名则没有。正在将图像上传到服务器目录并将其名称存储到数据库中。

Index.html

<!DOCTYPE HTML>
<html>
    <head>
        <script language="javascript" type="text/javascript" src="js/TabActions.js"></script>
    </head>
    <body>
 <form>             
 <table width="100%" border="0" align="center" >
  <input type="hidden" name="ExCategory" id="ExCategory" value="Meal">
  <tr>
    <td>Description:<br><textarea rows="4" cols="30" name= "Descr" maxlength="100"></textarea></td>
  </tr></table>
   <table width="100%" border="0" align="center" >
 <tr>
    <td> Date:</td>
    <td><input type="DATE"required name="ClaimDate" id="ClaimDate"/></td>
    <td colspan = 3><input type=file name="ClaimReceipt" id="ClaimReceipt" accept="image/jpeg,image/jpg,image/png/image/gif"></td>
  </tr>
  <tr>
   <td>Amount:</td>
    <td> <input type="number" size="5" name="ClaimAmt" id="ClaimAmt" required Placeholder="<?php echo "In ".$Currency; ?>" ></td>
</tr>
  <tr>
    <td colspan="6"  >
    <table border="0" Width="30%" height=40px >
        <tr>
            <td><input type="Button" value="Add" onclick="addFunction(ExCategory.value,Descr.value,ClaimDate.value,ClaimAmt.value,ClaimReceipt.value)"></td>
            </tr></table></td>
        </tr>        
</table>
            </div>
        </form>
    </body>
</html>

Action.js

function addFunction(ExCategory,Descr,ClaimDate,ClaimAmt,ClaimReceipt)
{
    var ajaxRequest;  // The variable that makes Ajax possible! 
    try
    {
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    }
    catch (e)
    {
        // Internet Explorer Browsers
        try
        {
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            try
            {
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e)
            {
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function()
    {
        if(ajaxRequest.readyState==4 && ajaxRequest.status==200)
        {
            document.getElementById('Res').innerHTML = ajaxRequest.responseText;
        }
    }
    ajaxRequest.open("POST","insert.php", true);
    ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    ajaxRequest.send("Add=102&ExCategory="+ExCategory+"&Descr="+Descr+"&ClaimDate="+ClaimDate+"&ClaimAmt="+ClaimAmt+"&ClaimReceipt="+ClaimReceipt);
}

插入.php

<?php
session_start();
//error_reporting(E_ERROR);
$User = 'User'; 
if (isset($_POST['ClaimDate'])) 
{
    $ClaimDate = $_POST['ClaimDate'];
}
else
{
    $ClaimDate = $_POST['ClaimTo'];
}
    $ExCategory = $_POST['ExCategory'];
    if(isset($_POST['Descr']))
    {
        $ClaimClass = stripslashes($_POST['Descr']);
    }
    else
    {
        $ClaimClass = 'No description';
    }

    If(isset($_POST['ClaimFrom']) && isset($_POST['ClaimFrom']))
    {
        $ClaimFrom = $_POST['ClaimFrom'];   
        $ClaimTo = $_POST['ClaimTo'];
    }
    else
    {
        $ClaimFrom = 'Null';                 
        $ClaimTo = 'Null';
    }                   
  $ClaimAmt = $_POST['ClaimAmt'];         
if (isset($_POST['Add'])) 
{
        if (isset($_FILES['ClaimReceipt']))
        {
            if(isset($_SESSION['counter']))
            {
                $Counter = $_SESSION['counter'];
            }
            else
            {
                $Counter = 0;
            }
            $Receipt = $_FILES['ClaimReceipt'];
            $file_type= $Receipt['type'];           
            $file_path=$_FILES["ClaimReceipt"]["tmp_name"];
            $file_name = $UserID."(".$Counter.").jpeg";         
            if($file_type!= '' && ($file_type="image/jpeg" || $file_type="image/png") && $file_size < 50000)
            {
                move_uploaded_file($file_path,"uploads/".$file_name);
                $ClaimReceipt = $file_name;
                $warning = '';
                $Counter++;
                $_SESSION['counter'] = $Counter;
            }
            else
            {
                $_SESSION['counter'] = $Counter;
                $warning = "Please check format '.jpeg or .png' for attachments and its size < 500 kb";
            }
        }
        Else
        {   
            $_SESSION['counter'] = $Counter;
            $ClaimReceipt = '';                 
        }
        include('dbcon.php');
        $stmt = $dbh->prepare("CALL sp_AddExpensesEntry(?,?,?,?,?,?)"); 
        $stmt ->execute(array($User,$ExCategory,$ClaimDate,$ClaimAmt,$ClaimClass,$ClaimReceipt));
        $dbh->connection = null;
}
?>

数据库表

CREATE TABLE `MyExp` (
  `UserName` varchar(45) NOT NULL,
  `ExCategory` varchar(15) NOT NULL,
  `ClaimDate` varchar(10) NOT NULL,
  `ClaimAmt` int(11) NOT NULL,
  `ClaimDesc` varchar(100) DEFAULT NULL,
  `ClaimReceipt` varchar(20) DEFAULT NULL,
  `ClaimRowid` int(7) NOT NULL AUTO_INCREMENT,
  UNIQUE KEY `ClaimRowid_UNIQUE` (`ClaimRowid`)
)

sp_AddExpensesEntry 存储过程

CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_AddExpensesEntry`(
    In UserName Varchar(45),
    In Category varchar(15),
    In Claimdate varchar(10),
    In Amt int,
    In Descr varchar(100),
    In ImgURL VARCHAR(20)
)
proc_main:BEGIN

    Declare RowId int;
    If Exists(Select ClaimRowid from MyExp) then
        Set RowId = (Select ClaimRowid from MyExp Order by ClaimRowid desc limit 1) + 1;
    Else
        Set RowId = 1;
    End If;
    INSERT INTO `MyExp`
    VALUES
    (
    UserName,
    category,
    Claimdate,
    Amt,
    Descr,
    ImgURL,
    RowId
    );
    commit;
END

请帮我解决这个问题。当数据在没有 AJAX 的情况下存储到数据库中时，文件存储机制运行良好，但为了避免页面重新加载，我尝试这样做。提前致谢。

最佳答案

要发布文件，您需要使用 multipart/form-data 而不是 application/x-www-form-urlencoded。您实际上并没有通过 ajax 请求传递文件，这就是它没有存储在任何地方的原因。

关于javascript - 无法使用 HTML5 PHP 和纯 ajax 上传图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28768946/

25 4 0
文章推荐： Javascript - 使用匹配来查找两个单词并返回它们之间的所有文本(尽管有换行符)
文章推荐： javascript - SimpleForm 使用 "return"键提交
文章推荐： javascript - 是否可以通过属性值获取元素id并将属性设置为parentNode
文章推荐： javascript - 单击 Div A 会触发 Div B 并删除 Div B 的同级
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com