Question

我遇到了基于Webkit的浏览器（Safari和Chrome - 我在Mac上测试）的一个奇怪问题，我不确定是什么导致它。这是我创建的一个小脚本，可以复制问题：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
function doRequest() {
  document.test.submit();
  $.ajax({
    type: "GET",
    cache: false,
    url: 'ajax.php?tmp=1',
    success: doSuccess
  });
}
function doSuccess(t_data,t_status,req) {
  alert('Data is: '+ t_data +', XMLHTTPRequest status is: '+ req.status);
}
</script>
</head>

<body>
<form name="test" method="post" action="ajax.html" enctype="multipart/form-data">
<input type="file" name="file_1">
<br><input type="button" value="upload" onclick="doRequest();">
</form>
</body>
</html>

ajax.php是：

<?php
echo $_REQUEST['tmp'];
?>

这在Firefox上有效，但在Safari和Chrome上，XMLHTTPRequest状态始终为“0”。如果我删除此行：

document.test.submit();

然后它可以工作，但当然表格没有提交。我已经尝试将表单提交按钮从“按钮”更改为“提交”，但这也阻止它在Safari或Chrome上运行。

我想要完成的是：

提交表格
调用另一个脚本来获取通过表单上传文件的状态（这是一个小型上传进度表）。

任何帮助都非常感激 - 我希望这只是一个我不熟悉的怪癖。

谢谢！

布赖恩

Answer 1

简单地说：无法使用AJAX上传文件。

有很好的插件，例如jquery form会自动处理（通过创建隐藏的iframe并执行真正的文件上传）。

我认为FireFox有native file upload API但是如果你想要一个跨浏览器解决方案，你需要看一些插件。使用flash upload是另一种解决方案。

Answer 2

我在开发类似的上传检查工具1时的经验是，您应该同时使用success: ..和complete: ..。他们可能会在您的代码中执行完全相同的操作，您可以让它们调用相同的函数。当请求完成时complete:被调用，success:在请求成功时被调用。因此可能：

function doRequest() {
  document.test.submit();
  $.ajax({
    type: "GET",
    cache: false,
    url: 'ajax.php?tmp=1',
    complete: doSuccess,
    success: doSuccess
  });
}

jQuery AJAX调用无法在Webkit中运行

2 个答案: