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

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

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