使用PHP的BLOB圖像的Javascript AJAX上傳。 $ _FILES為空

Question

嗨，我正嘗試使用Javascript和PHP通過AJAX將BLOB圖像上傳到我的本地主機wampserver。

我正在嘗試獲取$_FILES的圖像，但是由於某種原因$_FILES為空。 我已經設置了enctype並檢查了php.ini中的file_uploads = On 。

這是我的HTML表單：

<h1>CREATE A NEW ENTRY</h1>
<form name="insertForm" method="post" enctype="multipart/form-data">
  Name: <input type="text"  id="insert_name" /> <br />
  Age: <input type="text" id="insert_age" /> <br />
  WPM: <input type="text" id="insert_wpm" /> <br />
  Sex: <select id="insert_sex">
            <option>M</option>
            <option>F</option>
       </select><br />
  Photo : <input type="file" name="photo" id="insert_photo" /> <br />
  <input type="button" onClick="insertFunction()" value="UPDATE LIST" />
</form>
<br>
<br>
<div id="preview"><img id="preview_img" src="images/placeholder.png"/></div>
<div id="message"></div>

這是運行AJAX的javascript：

function insertFunction() 
{
    var ajaxRequest = createAjaxObject(); // checks for browser type and returns corres. ajax object    
    var name = document.getElementById('insert_name').value;
    var age = document.getElementById('insert_age').value;
    var wpm = document.getElementById('insert_wpm').value;
    var sex = document.getElementById('insert_sex').value;

    var image = document.getElementById('insert_photo').files[0];
    var imageType = image.type;
    alert(imageType);
    var match = ["image/jpeg", "image/png", "image/jpg"]

    if (!((imageType==match[0]) || (imageType==match[1]) || (imageType==match[2])))
    {
    document.getElementById('preview').innerHTML = '';
    document.getElementById('preview').innerHTML = '<img id="preview_img" src="images/noimage.png"/ alt="../images/noimage.png">';
    document.getElementById("message").innerHTML = "<p class='error'>Please Select A valid Image File</p>"+"<h4>Note</h4>"+"<span id='error_message'>Only jpeg, jpg and png Images type allowed</span>";
    }
    else
    {
    var reader =  new FileReader();
    reader.onload = function(e) {
        document.getElementById('preview').innerHTML = '';
        document.getElementById('preview').innerHTML = '<img id="preview_img" src="' + e.target.result + '" alt="' + e.target.result + '">';
    };
    reader.readAsDataURL(image);

    var dataString = "name=" + name + "&age=" + age + "&wpm=" + wpm + "&sex=" + sex + "&photo=" + image;

    ajaxRequest.open("POST", "insert-example.php", true);

    ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    ajaxRequest.send(dataString);
    document.getElementById('insertDiv').innerHTML = "processing...";

    ajaxRequest.onreadystatechange = function() {

        if (ajaxRequest.readyState == 4)
        {
        var insertDiv = document.getElementById('insertDiv');
        insertDiv.innerHTML = ajaxRequest.responseText;
        }
    }
   } 
}

這是更新本地主機的php。

<?php

    if ($_SERVER["REQUEST_METHOD"] == "POST")
    {
        $dbhost = "localhost";
        $dbuser = "root";
        $dbpassword = "";
        $dbname = "ajaxtutorial";

        $link = mysqli_connect($dbhost, $dbuser, $dbpassword, $dbname);

        if (mysqli_connect_errno())
        {
            echo "Connection failed: %s" . mysqli_connect_error();
        }

        mysqli_connect($dbhost, $dbuser, $dbpassword) or die(mysql_error());
        mysqli_select_db($link, $dbname) or die("Cannot connect to database");

        $name = mysqli_real_escape_string($link, $_POST['name']);
        $age = mysqli_real_escape_string($link, $_POST['age']);
        $wpm = mysqli_real_escape_string($link, $_POST['wpm']);
        $sex = mysqli_real_escape_string($link, $_POST['sex']);

        // Image file code below

        if (false) 
        {
            $photo = $_FILES["photo"];
            echo $photo;
        }

        else
        {   
            echo var_dump($_FILES);
        }       
    }
?>

我從var_dump獲得的輸出是：

數組（大小= 0）
空

有人可以告訴我我的代碼出了什么問題嗎？

Answer 1

嘗試使用jQuery，方法更簡單：（因此，請使用此腳本替換js文件中的所有內容，並保留HTML和PHP ）

      $.ajax({
        type: 'post',
        url: 'update.php', //php script
        data: new FormData($('form')[0]), //form data
        processData: false,
        contentType: false,
        success: function (result) {
          //do something cool when it is succesfully updated
      });

PS：不要忘了在腳本之前添加此內容，因為它是jQuery： <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js">

Answer 2

嘗試這個

var imageData = new FormData(image);

var dataString = "name=" + name + "&age=" + age + "&wpm=" + wpm + "&sex=" + sex + "&photo=" + imageData;

使用FormData對象發送文件