AJAX -上传文件(HTML 5) &PHP - AJAX - Uploading a file (HTML 5) & PHP

AJAX - Uploading a file (HTML 5) & PHP

本文关键字：PHP HTML 文件 AJAX | 更新日期: 2023-09-26

我觉得自己完全不知所措，但又感觉如此接近…

我正在尝试使用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 />";
?>

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

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

我不确定。但是在form标签上你没有指定method

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