在用户模块 , 我们的博客系统提供了修改头像的功能 , 因为Ajax是无法上传文件的 , 我们只能用表单自己提交 , 可是那样会刷新页面 , 于是我使用了插件jquery-form.js
jquery-form插件是一个优秀的Ajax表单插件,可以非常容易地、无侵入地升级HTML表单以支持Ajax。jquery-form有两个核心方法 – ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能。另外,插件还包括其他的一些方法: formToArray()、formSerialize()、fieldSerializze()、fieldValue()、clearForm()、clearFields() 和 resetForm()等。
下载地址: http://malsup.com/jquery/form/#download
在页面中引入插件
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-form.js"></script>
表单代码
<form action="这里写上传图片的url" method="post" id="subFile" enctype="multipart/form-data" onsubmit="return saveReport()">
<div class="form-group">
<input type="file" name="picture"/>
</div>
<input type="submit" value="上传">
</form>
enctype属性规定在发送到服务器之前应该如何对表单数据进行编码
- application/x-www-form-urlencoded表示在发送前编码所有字符(默认)
- multipart/form-data表示不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。
- text/plain表示空格转换为"+" 加号,但不对特殊字符编码。
JavaScript代码
<script type="text/javascript">
function saveReport(){
$("#subFile").ajaxSubmit(function(message){
console.log(message);
//message是后台返回的信息
});
return false;
// 必须返回false,否则表单会自己再做一次提交操作,并且页面跳转
}
</script>
这样就可以无刷新的上传图片啦