通過AJAX上傳圖像-如何將文件名傳遞給服務器？

Question

我正在嘗試使用AJAX將圖像上傳到Web服務器，但是無法將文件名和路徑傳遞給服務器端的PHP腳本。

這是帶有JavaScript的HTML（ImageUpload01.php），它調用了PHP：

請不要過多地關注粗體（ .... ）行，因為這些是我為測試而編寫的腳本，無法正常工作。

我編寫的同一程序無需使用AJAX即可上傳圖像，並且可以正常工作。 而且，我使用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）。 我知道您提到過您喜歡香草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 個解決方案

解決方案1
0 2013-11-29 16:25:39

解決方案2
-1 2013-11-29 16:24:11

解決方案3
-1 2013-11-29 16:24:56

通過AJAX上傳圖像-如何將文件名傳遞給服務器？

問題描述

3 個解決方案

解決方案1 0 2013-11-29 16:25:39

解決方案2 -1 2013-11-29 16:24:11

解決方案3 -1 2013-11-29 16:24:56

解決方案1
0 2013-11-29 16:25:39

解決方案2
-1 2013-11-29 16:24:11

解決方案3
-1 2013-11-29 16:24:56