2019年更新：这仍然取决于您的人口统计使用的浏览器。

使用“新”HTML5文件API需要了解的一件重要事情是，直到IE 10才支持它。如果你所瞄准的特定市场对旧版本Windows的倾向高于平均水平，你可能无法访问它。

截至2017年，约5%的浏览器是IE 6、7、8或9之一。如果你进入一家大公司（例如，这是一个B2B工具或你提供的培训工具），这个数字可能会飙升。2016年，我与一家在60%以上的机器上使用IE8的公司打过交道。

截至本期编辑时，已是2019年，距离我最初的答案已经过去了11年。IE9和IE9的全球使用率在1%左右，但仍有使用率较高的集群。

无论有什么功能，重要的一点是检查用户使用的浏览器。如果你不这样做，你会很快学到一个痛苦的教训，为什么“为我工作”在交付给客户时不够好。犬科动物是一种有用的工具，但请注意它们的人口统计数据来源。它们可能与您的不一致。这比企业环境更真实。

我2008年的回答如下。

然而，有一些可行的非JS文件上传方法。您可以在页面上创建一个iframe（用CSS隐藏），然后将表单定位到该iframe。主页不需要移动。

这是一个“真实”的帖子，所以它不完全是交互式的。如果你需要状态，你需要服务器端的东西来处理。这取决于您的服务器。ASP.NET有更好的机制。PHP失败了，但您可以使用Perl或Apache修改来解决它。

如果您需要多个文件上传，最好一次上传一个文件（以克服最大文件上传限制）。将第一个表单发布到iframe，使用上面的方法监视其进度，完成后，将第二个表单发布给iframe等等。

或者使用Java/Flash解决方案。他们在处理自己的帖子时更加灵活。。。

为此，我建议使用Fine Uploader插件。您的JavaScript代码为：

$(document).ready(function() {
  $("#uploadbutton").jsupload({
    action: "addFile.do",
    onComplete: function(response){
      alert( "server response: " + response);
    }
  });
});

Simple Ajax Uploader是另一个选项：

https://github.com/LPology/Simple-Ajax-Uploader

跨浏览器——适用于IE7+、Firefox、Chrome、Safari和Opera支持多个并发上传——即使在非HTML5浏览器中也是如此没有flash或外部CSS——只有一个5Kb的Javascript文件可选，内置支持完全跨浏览器进度条（使用PHP的APC扩展）灵活且高度可定制——使用任何元素作为上传按钮，设置自己的进度指示器不需要表单，只需提供一个元素作为上传按钮麻省理工学院许可证——在商业项目中免费使用

示例用法：

var uploader = new ss.SimpleUpload({
    button: $('#uploadBtn'), // upload button
    url: '/uploadhandler', // URL of server-side upload handler
    name: 'userfile', // parameter name of the uploaded file
    onSubmit: function() {
        this.setProgressBar( $('#progressBar') ); // designate elem as our progress bar
    },
    onComplete: function(file, response) {
        // do whatever after upload is finished
    }
});

使用HTML5和JavaScript，异步上传非常容易，我创建了上传逻辑和html，这不是完全有效的，因为它需要api，但演示了它是如何工作的，如果你有一个名为/upload的端点从你的网站的根目录，这段代码应该适合你：

const asyncFileUpload=（）=>{const fileInput=document.getElementById（“文件”）；const file=文件输入文件[0]；const-uri=“/upload”；const-xhr=新XMLHttpRequest（）；xhr.upload.onprogress=e=>{常量百分比=e.loaded/e.total；console.log（百分比）；};xhr.onreadystatechange=e=>{如果（xhr.readyState==4&&xhr.status==200）{console.log（“文件已上载”）；}};xhr.open（“POST”，uri，true）；xhr.setRequestHeader（“X-FileName”，文件名）；xhr.send（文件）；}<表单><span>文件</span><input type=“file”id=“file”name=“file”size=“10”/><input onclick=“asyncFileUpload（）”id=“upload”type=“button”value=“upload”/></form>

还有一些关于XMLHttpReques的进一步信息：

XMLHttpRequest对象所有现代浏览器都支持XMLHttpRequest对象。XMLHttpRequest对象可用于与web交换数据幕后服务器。这意味着可以更新而不重新加载整个页面。

创建XMLHttpRequest对象所有现代浏览器（Chrome、Firefox、，IE7+、Edge、Safari、Opera）有一个内置的XMLHttpRequest对象。创建XMLHttpRequest对象的语法：variable=new XMLHttpRequest（）；

跨域访问出于安全原因，现代浏览器不会允许跨域访问。这意味着网页和它试图加载的XML文件，必须位于同一服务器上。W3Schools上的示例都是位于W3Schools中的XML文件领域如果您想在自己的网页上使用上面的示例您加载的XML文件必须位于您自己的服务器上。

有关详细信息，请继续阅读此处。。。

2019年更新：这仍然取决于您的人口统计使用的浏览器。

使用“新”HTML5文件API需要了解的一件重要事情是，直到IE 10才支持它。如果你所瞄准的特定市场对旧版本Windows的倾向高于平均水平，你可能无法访问它。

截至2017年，约5%的浏览器是IE 6、7、8或9之一。如果你进入一家大公司（例如，这是一个B2B工具或你提供的培训工具），这个数字可能会飙升。2016年，我与一家在60%以上的机器上使用IE8的公司打过交道。

截至本期编辑时，已是2019年，距离我最初的答案已经过去了11年。IE9和IE9的全球使用率在1%左右，但仍有使用率较高的集群。

无论有什么功能，重要的一点是检查用户使用的浏览器。如果你不这样做，你会很快学到一个痛苦的教训，为什么“为我工作”在交付给客户时不够好。犬科动物是一种有用的工具，但请注意它们的人口统计数据来源。它们可能与您的不一致。这比企业环境更真实。

我2008年的回答如下。

然而，有一些可行的非JS文件上传方法。您可以在页面上创建一个iframe（用CSS隐藏），然后将表单定位到该iframe。主页不需要移动。

这是一个“真实”的帖子，所以它不完全是交互式的。如果你需要状态，你需要服务器端的东西来处理。这取决于您的服务器。ASP.NET有更好的机制。PHP失败了，但您可以使用Perl或Apache修改来解决它。

如果您需要多个文件上传，最好一次上传一个文件（以克服最大文件上传限制）。将第一个表单发布到iframe，使用上面的方法监视其进度，完成后，将第二个表单发布给iframe等等。

或者使用Java/Flash解决方案。他们在处理自己的帖子时更加灵活。。。

使用|HTML5的readAsDataURL（）或一些base64编码器将文件转换为base64。在这里摆弄

var reader = new FileReader();

        reader.onload = function(readerEvt) {
            var binaryString = readerEvt.target.result;
            document.getElementById("base64textarea").value = btoa(binaryString);
        };

        reader.readAsBinaryString(file);

然后检索：

window.open("data:application/octet-stream;base64," + base64);