AJAX - 上传文件 (HTML5) 和 PHP答案

【问题标题】：AJAX - Uploading a file (HTML 5) & PHPAJAX - 上传文件 (HTML5) 和 PHP
【发布时间】：2011-08-05 06:50:42
【问题描述】：

我感觉完全超出了我的深度，但我感觉如此接近..

我正在尝试使用 AJAX 上传文件。我找到了本教程http://blog.new-bamboo.co.uk/2010/7/30/html5-powered-ajax-file-uploads，直到最后它似乎进展顺利。我似乎无法访问 PHP 中的文件，即使用 $_FILES["foo"]["name"]; 而且我不确定如何使用其他技术上传。

我不是在寻找完美的代码，只是保持简单，以便我能理解发生了什么。在此先感谢:-)

这是我的服务器端代码：

HTML: 页面标题

</head> 
<body>




  <form onsubmit='showUser(); return false;' enctype='multipart/form-data'>
    <input id='the-file' name='file' type='file' />
    <input type='submit'>
  </form>
  <br />


  <div id='txtHint'><b></b></div>

</body>

Javascript：

function showUser(str)
{
var fileInput = document.getElementById('the-file');
var file = fileInput.files[0];
var foo = file.fileName;

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.onreadystatechange=function()
  {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
  document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
  }
 }
 xmlhttp.open("POST","new_film_pro.php",true);
 xmlhttp.setRequestHeader("Content-type", "multipart/form-data");
 xmlhttp.setRequestHeader("X-File-Type", file.type);
 xmlhttp.setRequestHeader("X-File-Name", foo);
 xmlhttp.send(file);
 }

PHP：

<?php


$postdata = file_get_contents("php://input");

echo "Name: " . $_SERVER['HTTP_X_FILE_NAME'] . "<br />";

?>

【问题讨论】：

您是否尝试过使用 VAR_DUMP( $_FILES ) ？
对不起，我之前没有看到评论 - 我得到的结果是 array(0) { }

标签： php javascript ajax html

【解决方案1】：

您可以使用 file_get_contents('php://input') 来获取文件内容。

【讨论】：

【解决方案2】：

看看http://aquantum-demo.appspot.com/file-upload

直接编写 JavaScript 不再是一个好主意。使用该页面上演示的库，您可以创建功能更强大的文件上传，它支持多个文件、可恢复下载、进度条和许多其他功能，您确实需要亲自实现这些功能，但可以为您的用户提供更好的体验。

【讨论】：

【解决方案3】：

我不确定。但是在表单标签上你没有指定方法

【讨论】：