2011-04-14 65 views
2

我觉得完全是出于我的深度,但我感觉如此接近..AJAX - 上传文件(HTML 5)和PHP

我试图上传使用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 />"; 

?> 
+0

您是否尝试过使用的var_dump($ _ FILES)? – 2011-04-14 06:22:09

+0

对不起,我之前没有看到评论 - 我得到的结果是数组(0){} – Sheldon 2011-04-14 09:38:42

回答

2

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

编写直接的JavaScript不再是个好主意。使用库,页面上展示,您可以创建支持多个文件,resumeable下载,进度条和许多其他功能,你真的会有出汗自己实现,但是这给用户带来更好的体验一个更强大的文件上传。

-1

我不是在表单标签sure.but你没有指定方法

-1

您可以使用的file_get_contents( 'PHP://输入')来获取文件的内容。