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

时间:2013-02-05 11:07:14

标签: jquery jquery-plugins jquery-forms-plugin

我正在尝试上传以下表单

<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的调试器并观察执行的每一步,文件将被上传到数据库两次。但是在没有任何断点的情况下通过它会导致它只被上传一次。

4 个答案:

答案 0 :(得分:1)

问题出在这一部分:

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

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

没有它们,它试图将名为#filesend的变量的值传递给函数;我不确定这是一个有效的变量名,所以它可能会抛出一个错误 - 检查你的浏览器的开发人员工具控制台会告诉你是否因为它而抛出错误。

答案 1 :(得分:1)

通过ajax无法上传文件。您可以使用IFrame上传文件,而无需刷新页面。你可以在这里查看更多细节:

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

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

您的代码中存在语法问题

仔细看看

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

选择器需要结束字符串,即'#filesend'