0

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

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

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

如何从 javascript 访问文件输入表单？即我怎样才能获得'post' 文件信息来调用'upload_file.php'。

附言。我宁愿不使用 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 等等......

4

6 回答 6

0

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

于 2012-07-17T21:58:44.723 回答
0

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

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

于 2012-07-17T22:00:49.437 回答
0

你考虑过 HTML5 File API 吗？

相关的 StackOverFlow：

html 5 文件上传

于 2012-07-17T22:01:06.383 回答
0

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

于 2012-07-17T22:07:19.043 回答
0

通过 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 发布它

于 2012-07-17T22:14:23.757 回答
0

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

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

和

     xmlhttp.setRequestHeader("enctype", "multipart/form-data")
于 2012-07-29T20:01:39.240 回答