AJAX - 上传文件（HTML 5）及PHP上传文件、AJAX、PHP、HTML
我觉得完全是出于我的深度，但我觉得自己如此之近。
我想上传使用AJAX的文件。我发现这个教程的http：//博客。新-bamboo.co.uk / 2010/7/30 / HTML5供电-AJAX-文件上传的，它似乎进展相当顺利，直到结束。我似乎无法使用$ _FILES访问该文件在PHP即[富] [名称]; 我不知道如何使用其他技术来上传。
我不是找code是完美的，只是保持简单，所以我能理解这是怎么回事。在此先感谢： - ）
下面是我的服务器端code：
HTML： 页面标题
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;形成的onsubmit =showUser（）;返回false; ENCTYPE =的multipart / form-data的'＆GT;
＆LT;输入ID ='的文件NAME ='文件'类型=文件/＆GT;
＆LT;输入类型=提交＆GT;
＆LT; /形式GT;
＆LT; BR /＆GT;
＆LT; DIV ID ='txtHint'＆GT;＆LT; B＆GT;＆LT; / B＆GT;＆LT; / DIV＆GT;
＆LT; /身体GT;
JavaScript的：
函数showUser（STR）
{
VAR的FileInput =的document.getElementById（'的文件'）;
var文件= fileInput.files [0];
无功富= file.fileName;
如果（STR ==）
{
的document.getElementById（txtHint）的innerHTML =。
返回;
}
如果（window.XMLHtt prequest）
{// $ C $下IE7 +，火狐，Chrome，歌剧，Safari浏览器
XMLHTTP =新XMLHtt prequest（）;
}
其他
{// code对IE6，IE5
XMLHTTP =新的ActiveXObject（Microsoft.XMLHTTP）;
}
xmlhttp.onreadystatechange =功能（）
{
如果（xmlhttp.readyState == 4和＆安培; xmlhttp.status == 200）
{
的document.getElementById（txtHint）的innerHTML = xmlhttp.responseText。
}
}
xmlhttp.open（POST，new_film_pro.php，真正的）;
xmlhttp.setRequestHeader（内容型，多部分/表单数据）;
xmlhttp.setRequestHeader（X-文件类型，file.type）;
xmlhttp.setRequestHeader（X文件名，FOO）;
xmlhttp.send（文件）;
}
PHP：
＆LT; PHP
$ POSTDATA =的file_get_contents（PHP：//输入）;
回声名称：。 $ _ SERVER ['HTTP_X_FILE_NAME']。 ＆LT; BR /＆gt;中;
？＆GT;
解决方案
看一看 HTTP： //aquantum-demo.appspot.com/file-upload
编写直接的JavaScript不再是个好主意。使用库为证明该网页上，你可以创建一个更强大的文件上传，支持多个文件，resumeable下载，进度条等多项功能，你就真的要流汗来实现自己，但它给你的用户提供更好的体验。
I feel completely out of my depth but I feel so close..
I'm trying to Upload a file using AJAX. I found this tutorial http://blog.new-bamboo.co.uk/2010/7/30/html5-powered-ajax-file-uploads and it seemed to be going quite well until the end. I can't seem to access the file in PHP i.e. using $_FILES["foo"]["name"]; and I'm not sure how to upload using other techniques.
I'm not looking for the code to be perfect, just kept simple so I can understand what's going on. Thanks in advance :-)
Here is my server side code:
HTML: page title
</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 />";
?>
解决方案
Have a look at http://aquantum-demo.appspot.com/file-upload
Writing straight JavaScript is no longer such a great idea. Using libraries as demonstrated on that page, you can create a much more powerful file upload which supports multiple files, resumeable downloads, progress bar and many other features that you would really have to sweat to implement yourself but which give your user a better experience.
