Question

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

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

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

如何从javascript访问文件输入表单？即如何获取'post'文件信息以调用'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等...

Answer 1

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

Answer 2

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

检查此链接是否有ajax帖子。您可以像普通表单一样发布它，不需要额外的努力。

Answer 3

您是否考虑过HTML5文件API？

相关StackOverFlow：

Html 5 File upload

Answer 4

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

Answer 5

通过AJAX执行此操作可以实现以下问题（IE除外）。

1）IE是不可能的。如果有人找到方法给我一个喊叫。我所做的只是以正常方式提交表单并返回更新的页面。

2）对于FF（如果内存为我提供正确的Opera和Safari），以下代码段可以正常工作

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发布

Answer 6

通过替换：

解决了我的问题

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

带

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

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

6 个答案: