Fatal编程技术网
  • javascript/
  • Javascript 通过AJAX上传图像-如何将文件名传递给服务器？

Javascript 通过AJAX上传图像-如何将文件名传递给服务器？

javascript php ajax

Javascript 通过AJAX上传图像-如何将文件名传递给服务器？,javascript,php,ajax,Javascript,Php,Ajax,我试图使用AJAX将图像上传到Web服务器，但无法将文件名和路径传递到服务器端的PHP脚本 这是带有JavaScript（ImageUpload01.php）的HTML，它调用php： 请不要太注意粗体（…）行，因为这些是我为测试编写的脚本，不起作用 我写的同样的程序不使用AJAX上传图像，它确实有效。 而且，我在发送客户ID时使用AJAX检索数据库记录，使用了完全相同的逻辑，它也起到了作用。但是AJAX中的图像上传给我带来了问题（只是因为我不知道如何传递文件名/路径） <!DOCTYPE

我试图使用AJAX将图像上传到Web服务器，但无法将文件名和路径传递到服务器端的PHP脚本

这是带有JavaScript（ImageUpload01.php）的HTML，它调用php：

请不要太注意粗体（…）行，因为这些是我为测试编写的脚本，不起作用

我写的同样的程序不使用AJAX上传图像，它确实有效。 而且，我在发送客户ID时使用AJAX检索数据库记录，使用了完全相同的逻辑，它也起到了作用。但是AJAX中的图像上传给我带来了问题（只是因为我不知道如何传递文件名/路径）

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
        <title>Image Upload</title>

        <script>        
            function showThumbnail(str)
            {
                var xmlhttp;  
                **alert(str);**
                **var params = "q=" + $_FILES['file']['name'];**
                if (str==="")
                  {
                  document.getElementById("txtHint").innerHTML="";
                  return;
                  }
                if (window.XMLHttpRequest)
                  {// code for IE7+, Firefox, Chrome, Opera, Safari
                  xmlhttp=new XMLHttpRequest();
                  }
                else
                  {// code for IE6, IE5
                  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                  }

                xmlhttp.open("POST","RunImageUpload01.php",true);
                xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xmlhttp.setRequestHeader("Content-length", params.length);
                xmlhttp.setRequestHeader("Connection", "close");                

                xmlhttp.onreadystatechange=function()
                  {
                  alert(xmlhttp.responseText);    
                  if (xmlhttp.readyState===4 && xmlhttp.status===200)
                    {
                    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                    }
                  };
                xmlhttp.send(params);
            }
        </script>        



    </head>
    <body>
        <?php

        ?>

        <form action="" > 
            <input type="file" name="file" id="file" /><br />
            <input type="button" name="submit" value="Submit" onclick="return showThumbnail(file.value);" />
        </form>        


        <div id="txtHint">

        </div>

    </body>
</html>


图像上传
函数显示缩略图（str）
{
var-xmlhttp；
**警报（str）**
**var params=“q=“+$”文件['file']['name']**
如果（str==“”）
{
document.getElementById（“txtHint”）.innerHTML=“”；
回来
}
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
open（“POST”，“RunImageUpload01.php”，true）；
setRequestHeader（“内容类型”，“应用程序/x-www-form-urlencoded”）；
setRequestHeader（“内容长度”，参数长度）；
setRequestHeader（“连接”，“关闭”）；
xmlhttp.onreadystatechange=函数（）
{
警报（xmlhttp.responseText）；
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
document.getElementById（“txtHint”）.innerHTML=xmlhttp.responseText；
}
};
xmlhttp.send（params）；
}
服务器端的PHP脚本（RunImageUpload01.PHP）
请帮帮我，我更喜欢JavaScript而不是JQuery

谢谢

Isaac

文件名不能与文件本身一起传递。相反，请使用Javascript读取文件名（从
文件
输入元素），并将其作为单独的
输入类型=“hidden”
元素发送

顺便说一句，表单元素应该包含属性
enctype=“multipart/form data”
，否则文件传输可能会有问题。

文件名不能与文件本身一起传递。相反，请使用Javascript读取文件名（从
文件
输入元素）并将其作为单独的
input type=“hidden”
元素发送

顺便说一句，表单元素应该包含属性
enctype=“multipart/form data”
，否则可能会出现文件传输问题。

使用XHR2作为jQuery的替代方法

原始XMLHttpRequest不正确支持多部分数据。

使用XHR2作为jQuery的替代方案

原始XMLHttpRequest不正确支持多部分数据。

您使用的浏览器是什么？这不适用于较旧的浏览器（IE）。我知道你提到你更喜欢香草javascript，但如果你可以选择使用jquery，请看看这个插件：。它为你提供了各种解决方法和技巧，使它可以在所有浏览器上使用。

你使用的是什么浏览器？这不适用于较旧的浏览器（IE）。我知道您提到您更喜欢香草javascript，但如果您可以选择使用jquery，请查看此插件：。它为您提供了各种解决方法和技巧，使其能够与所有浏览器一起工作。

提供的所有3个答案要么完全错误，要么大部分错误。您应该使用FormData以moder格式发送文件n个浏览器，然后返回到提交一个针对旧浏览器的隐藏iframe的表单。在这两种情况下，都会发送一个多部分编码的请求。包含文件的多部分边界将始终包含一个文件名参数，您可以在服务器端解析该参数。谢谢。我今晚将尝试它。非常感谢提供的信息。所有3个提供的答案要么完全错误，要么大部分错误。您应该使用FormData在现代浏览器中发送文件，然后退回到提交针对旧浏览器的隐藏iframe的表单。在这两种情况下，都将发送多部分编码的请求。包含文件的多部分边界将始终包含文件名参数，您可以对其进行服务器端解析。谢谢。我今晚将尝试使用它。非常感谢您提供的信息。这个答案没有任何意义。jQuery将在支持的地方使用XHR2。每个人都不想使用jQuery…您可以单独使用XHR2，而不需要额外的开销…为什么在我们都试图提供帮助时，您会加入并投票否决。谢谢，我会尝试今晚的所有答案。非常感谢，非常感谢您的时间。这个答案没有任何意义。jQuery将在支持的地方使用XHR2。每个人都不想使用jQuery…您可以单独使用XHR2而不需要额外的开销…为什么在我们都试图提供帮助的时候，您来投票反对。谢谢您，我今晚将尝试所有答案。Tha非常感谢您的时间。名称将始终与文件本身一起自动传递，作为文件多部分边界中的字段。名称将始终与文件本身一起自动传递，作为文件多部分边界中的字段。这根本不能回答问题。 
<?php
**$pName = $_POST['q'];**
$moved = move_uploaded_file($pName, "/var/www/vhosts/mywebsiteURL.com/store/mytest/images/temp/" . $pName);

                        if ($moved) {
                            echo "Success"
                        }
                        else {
                            echo "You fool, failure"
                        }

?>