Try

异步函数saveFile（）{let formData=新formData（）；formData.append（“file”，file.files[0]）；wait-fetch（'addFile.do'，｛method:“POST”，body:formData｝）；alert（“上传的数据：”）；}<span>文件</span><input type=“file”id=“file”name=“file”size=“10”/><input type=“button”value=“Upload”onclick=“saveFile（）”/>

content-type='multipart/form-data'由浏览器自动设置，文件名也自动添加到文件名FormData参数中（服务器可以轻松读取）。下面是一个更为成熟的错误处理和json添加示例

异步函数saveFile（inp）{让用户＝{name:'john'，年龄：34}；let formData=新formData（）；let photo=inp.files[0]；formData.append（“照片”，照片）；formData.append（“用户”，JSON.stringify（用户））；尝试{let r=等待获取（'/upload/image'，｛method:“POST”，body:formData｝）；console.log（'HTTP响应代码：'，r.status）；警报（“成功”）；}捕获（e）{console.log（'休斯顿我们有问题…：'，e）；}}<input-type=“file”onchange=“saveFile（this）”><br><br>在选择文件之前，打开chrome控制台>网络选项卡以查看请求详细信息。<br><br><small>因为在本例中，我们将请求发送到https://stacksnippets.net/upload/image响应代码当然是404</小>

示例：如果使用jQuery，您可以轻松地上传文件。这是一个小而强大的jQuery插件，http://jquery.malsup.com/form/.

实例

var $bar   = $('.ProgressBar');
$('.Form').ajaxForm({
  dataType: 'json',

  beforeSend: function(xhr) {
    var percentVal = '0%';
    $bar.width(percentVal);
  },

  uploadProgress: function(event, position, total, percentComplete) {
    var percentVal = percentComplete + '%';
    $bar.width(percentVal)
  },

  success: function(response) {
    // Response
  }
});

我希望这会有帮助

这个AJAX文件上传jQuery插件在某处上传文件，并传递对回调的响应。

它不依赖于特定的HTML，只需给它一个＜input-type=“file”＞它不要求服务器以任何特定方式响应使用多少文件或文件在页面上的位置无关紧要

--尽可能少地使用--

$('#one-specific-file').ajaxfileupload({
  'action': '/upload.php'
});

--或者--

$('input[type="file"]').ajaxfileupload({
  'action': '/upload.php',
  'params': {
    'extra': 'info'
  },
  'onComplete': function(response) {
    console.log('custom handler for file:');
    alert(JSON.stringify(response));
  },
  'onStart': function() {
    if(weWantedTo) return false; // cancels upload
  },
  'onCancel': function() {
    console.log('no file selected');
  }
});

注意：此答案已过时，现在可以使用XHR上载文件。

不能使用XMLHttpRequest（Ajax）上载文件。可以使用iframe或Flash模拟效果。优秀的jQuery表单插件，通过iframe发布文件以获得效果。

你也可以考虑使用类似的https://uppy.io.

它可以在不离开页面的情况下进行文件上传，并提供一些奖励，如拖放、在浏览器崩溃/网络不稳定的情况下恢复上传，以及从例如Instagram导入。它是开源的，不依赖于jQuery/React/Angular/Vue，但可以与它一起使用。免责声明：作为它的创建者，我有偏见；）

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解决方案。他们在处理自己的帖子时更加灵活。。。