使用jQuery表单插件通过ajax上传表单

Question

我正在尝试上传以下表单

<form id="filesend" enctype="multipart/form-data" method="post" action="upload.php"> Choose the file you want to send <br> <input name="file" type="file"><br><input type="submit"></form>

使用下面的 jquery 代码

<script>
$('document').ready(function() { 
var options= { target:'#close'}
$('#filesend').submit( function (){
$(this).ajaxSubmit(options);
          return false;         
})})
</script>

但是什么也没发生，表单像普通的 html 表单一样提交并导航到 upload.php，是的，我已经包含了插件。关于我可能会出错的任何想法。

编辑

我刚刚注意到一些有趣的事情。如果我通过 chrome 的调试器并观察执行的每一步，文件将被上传到数据库两次。但是在没有任何断点的情况下通过它会导致它只上传一次。

Answer 1

您的代码中存在语法问题

仔细看这里

$('#filesend').submit( function (){
$(this).ajaxSubmit(options);
          return false;         
})});

选择器需要结束 ins 字符串，即'#filesend'。

Answer 2

我认为您不能使用 Ajax 提交文件。基于 JQuery 的文件上传插件允许您“很好地”显示文件上传输入框。

Answer 3

无法通过 ajax 上传文件。您可以上传文件，而无需使用 IFrame 刷新页面。您可以在此处查看更多详细信息：

http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html

XHR2 支持通过 AJAX 上传文件。例如通过 FormData 对象，但不幸的是，并非所有/旧浏览器都支持它。

Answer 4

问题出在这部分：

$(#filesend).submit( function (){
    $(this).ajaxSubmit(options);
    return false;         
})

选择器应该是一个字符串，所以：$('#filesend') - 注意单引号（你也可以使用双引号）。

如果没有它们，它会尝试将名为 #filesend 的变量的值传递给函数；我不确定这是一个有效的变量名，因此它可能会引发错误 - 检查浏览器的开发人员工具控制台会告诉您是否因此引发了错误。