jquery ajaxsubmit上传文件初探

最近想把所有form做成ajax的，于是就采用ajaxsubmit插件，正好这个插件也支持文件上传，于是做个简单的例子测试文件上传

 

html代码

<form action="upload.php" method="post" id="form" enctype="multipart/form-data"> <div id="showmsg"></div> <p>text</p> <input type="file" name="upfile" /> <input type="submit" value="提交"/> </form>

用这个插件的时候form表单可以不用enctype="multipart/form-data"这个属性，我这里还是加上了

 

js代码

<mce:script src="jquery-1.3.2.min.js" mce_src="jquery-1.3.2.min.js" type="text/javascript"></mce:script> <mce:script src="jquery.form.js" mce_src="jquery.form.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- $(function (){ var options = { target: '#showmsg', beforeSubmit: showStart, success: showSuccess }; $('#form').submit(function(){ $(this).ajaxSubmit(options); return false; }); }); function showStart(){ alert('开始提交'); return true; } function showSuccess(){ alert("提交成功"); } // --></mce:script>

 

upload.php文件代码

file_put_contents('rs.txt',var_export($_FILES,true)); exit('上传结束');

 

一运行，发现能弹出“开始提交”，然后看rs.txt文件，也输出了上传文件的相关信息，利用嗅探工具，也看出确实上传了并且返回“上传结束”，但是就是没有弹出“提交成功”。

 

于是对照官网的options仔细查看，没发现错误，但是删除form里的file元素，却能弹出“提交成功”，标明是上传文件的功能导致无法弹出，仔细看了一下ajax upload的例子，发现代码里设置了options的dataType为html，但是ajaxSubmit标签里的参数说明却只说dataType可选值是xml、json和script，试着修改一下，代码如下

 

 

js代码

<mce:script src="jquery-1.3.2.min.js" mce_src="jquery-1.3.2.min.js" type="text/javascript"></mce:script> <mce:script src="jquery.form.js" mce_src="jquery.form.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- $(function (){ var options = { target: '#showmsg', beforeSubmit: showStart, success: showSuccess, dataType: 'html' }; $('#form').submit(function(){ $(this).ajaxSubmit(options); return false; }); }); function showStart(){ alert('开始提交'); return true; } function showSuccess(){ alert("提交成功"); } // --></mce:script>

 

运行看一下，果然没问题了