用ajax进行表单的post提交文件

因为很多时候不是要表单直接提交到服务端,而是要用到ajax,通过ajax对表单进行提交

首先表单form如何书写

<form enctype="multipart/form-data" id="formimg">
         <input type="file" name="headimg" id="imghead">
         <input type="submit" class="btn btn-default" id="subimg">
</form>

为form指定id

这是有文件上传必写的属性

enctype="multipart/form-data"

设置id值为ajax中获取表单的值提供方便

id="formImg"

 $('#subimg').on('click', function() {

                event.preventDefault() //阻止form表单默认提交
                $.ajax({
                    url: '/changeheadpic',
                    type: 'post',
                    cache: false, //上传文件不用缓存
                    processData: false, //data的值是formData对象不用对数据做处理
                    contentType: false,
                    data: new FormData($('#uploadimg')[0]), //有[0]因为jquery的隐式迭代,所以此时是把jquery转成js
                    success: function(data) {
                       console.log('这是回调函数')
            })