AJAX文件上传到php，什么都没有发送？答案

【问题标题】：AJAX file upload to php, nothing being sent?AJAX文件上传到php，什么都没有发送？
【发布时间】：2012-07-16 21:37:40
【问题描述】：

我的网站上有一个输入，允许用户选择要上传的文件

<input type="file" name="file" id="file" />

在我的页面末尾，我有一个调用 javascript 函数的按钮。该函数需要检查用户是否指定了要上传的文件，如果是，则上传文件（php）并获取文件名。

如何从 javascript 访问文件输入表单？即如何获取“发布”文件信息以调用“upload_file.php”。

ps。我宁愿不使用 JQuery

编辑 - 我已经尝试过，但它似乎不起作用

function uploadFile(){
    var files = document.getElementById('file');
    var file = files.files[0];

    var xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
        alert(xmlhttp.responseText);
        }
    }
    xmlhttp.open("POST","uploadfile.php",true);
    xmlhttp.setRequestHeader("Content-type", "multipart/form-data")
    var formData = new FormData();
    formData.append("thefile", file);
    xmlhttp.send(formData);
}

php:

<?php

echo "Upload: " . $_FILES["thefile"]["name"] . "<br />";
echo "Type: " . $_FILES["thefile"]["type"] . "<br />";
echo "Size: " . ($_FILES["thefile"]["size"] / 1024) . " Kb<br />";
echo "Temp file: " . $_FILES["thefile"]["tmp_name"] . "<br />";

?>

提示我文件名为空、类型为空、大小为 0 等...

【问题讨论】：

提交？如何？普通的表单提交，还是 AJAX（使用 XHR2）？
哦，对不起。 AJAX - 用户没有离开页面。另外，我认为使用 XHR2

标签： javascript html

【解决方案1】：

它可以通过 DOM 访问，就像任何其他元素一样。唯一的限制是出于安全原因您不能更改它。

【讨论】：

【解决方案2】：

http://www.simonerodriguez.com/ajax-form-submit-example/

查看此链接以获取 ajax 帖子。您可以像普通形式一样简单地发布它，不需要额外的努力。

【讨论】：

【解决方案3】：

你考虑过 HTML5 File API 吗？

相关 StackOverFlow：

Html 5 File upload

【讨论】：

【解决方案4】：

我认为你需要这样的东西： http://jsfiddle.net/kHQLp/4/

【讨论】：

【解决方案5】：

通过 AJAX 这样做有以下问题可以解决（除了 IE）。

1) IE 是不可能的。如果有人找到了方法，请大声告诉我。我所做的只是以正常方式提交表单并返回更新的页面。

2) 对于 FF（如果我没记错的话 Opera 和 Safari），下面的 sn-p 可以工作

var fileTag = document.getElementById('id for input element');
var file = fileTag.files[0];

// You can check the type here by checking the string file.type

var data = file.getAsBinary(); // Or getAsText()

3) 对于 Chrome，请使用此代码

var fileTag = document.getElementById('id for input element');
var file = fileTag.files[0];
var reader = new FileReader();
reader.onload = function() { /* Use reader.result as it has loaded */  };
reader.onerror = function(e) { /*  and error occurred - handle it */ };
reader.readAsText(file); // I think there is also a function readAsBinary.

当你得到文件的内容后，你可以使用 AJAX 发布它

【讨论】：

【解决方案6】：

通过替换解决了我的问题：

    xmlhttp.setRequestHeader("Content-type", "multipart/form-data")

与

     xmlhttp.setRequestHeader("enctype", "multipart/form-data")

【讨论】：