使用php的BLOB图像的Javascript AJAX上传。 $ _FILES是空的

嗨我想通过AJAX使用Javascript和PHP上传一个BLOB图像到我的本地主机wampserver上。

我想获得$_FILES中的图像，但由于某种原因$_FILES为空。我已经设置了enctype并且为file_uploads = On检查了php.ini。

这里是我的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）
空

可能有人请告诉我什么是我的代码的问题呢？

来源

2015-05-06 Flame of udun

那么，你有任何错误？如果是这样，请将它们包含在您的问题中。 – Epodax

@Epodax没有错误 –

尝试'ini_set（“display_errors”，1）; error_reporting（E_ALL）;'检查错误 –

试试这个

var imageData = new FormData(image); 

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

Sending files using a FormData object

来源

2015-05-06 11:57:22 websky

尝试使用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">

来源

2015-05-06 12:06:12

使用php的BLOB图像的Javascript AJAX上传。 $ _FILES是空的

回答

相关问题