前端页面无刷新上传图片至后台

时间:2021-06-25 12:12:55

在用户模块 , 我们的博客系统提供了修改头像的功能 , 因为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>

这样就可以无刷新的上传图片啦