Question

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

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

请不要太注意以粗体显示的行（ .... ），因为这些是我为测试编写的脚本，但没有用。

我编写的相同程序在不使用AJAX的情况下上传图像，并且DID WORK。而且，我使用AJAX完成相同的逻辑，在发送客户ID时检索数据库记录，它也有效。但是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>

服务器端的PHP脚本（RunImageUpload01.php）

<?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"
                        }

?>

请帮助我，我更喜欢JavaScript而不是JQuery。

感谢，

艾萨克

Answer 1

您使用的浏览器是什么？这不适用于旧浏览器（IE）。我知道你提到你更喜欢vanilla javascript，但是如果你有选择使用jquery，请看一下这个插件：http://malsup.com/jquery/form/#file-upload。它可以为您提供各种解决方法和黑客，使其适用于所有浏览器。

Answer 2

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

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

Answer 3

使用XHR2来替代jQuery。

http://www.w3.org/TR/XMLHttpRequest2/#the-formdata-interface

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

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

3 个答案: