ajax上传文件 基于jquery form表单上传文件

Posted 2021-01-18 明天就减肥

<script src="/static/js/jquery.js"></script>
<script>
    $("#reg-btn").click(function () {
        // 1. 取到用户填写的数据
        var form_data_obj = new FormData();
        form_data_obj.append(‘username‘,$(‘#id_username‘).val());
        form_data_obj.append(‘password‘,$(‘#id_password‘).val());
        form_data_obj.append(‘re_password‘,$(‘#id_re_password‘).val());
        form_data_obj.append(‘phone‘,$(‘#id_phone‘).val());
        form_data_obj.append(‘email‘,$(‘#id_email‘).val());
        form_data_obj.append(‘csrfmiddlewaretoken‘,$("[name= ‘csrfmiddlewaretoken‘]").val());
        form_data_obj.append(‘avatar‘,$(‘#avatar‘)[0].files[0]);
        // 2. 往后端发post请求
        $(‘#reg-btn‘).click(function(){
            $.ajax({
                url:‘/reg/‘,
                type:‘post‘,
                data:form_data_obj,
                processData: false,
                contentType: false,
                success:function (response) {
                    console.log(response);
                    {#错误信息为1，则展示错误信息#}
                    if(response.code ===1){$.each(response.msg, function (k,v) {
                        console.log(‘k‘,k);
                        console.log(‘v‘,v);
                        $(‘#id_‘+k).next().text(v[0]).parent().addClass(‘has-error‘)
                    })}
                    else if(response.code ===0){location.href=response.msg}

                }
            })
        })
        });


    // 每一个input标签获取焦点的时候，把自己下面的span标签内容清空，把父标签的has-error样式移除
    $("input.form-control").focus(function () {
        $(this).val(‘‘).next("span").text(‘‘).parent().removeClass(‘has-error‘);
    });


    // 前端页面实现头像预览
    // 当用户选中文件之后，也就是头像的input标签有值时触发
    $(‘#avatar‘).change(function () {
        var file = this.files[0];
        var fr = new FileReader();
        fr.readAsDataURL(file);
        fr.onload = function(){
            $(‘#avatar-img‘).attr(‘src‘,fr.result)

        }
    })

 

注意点：

　　ajax上传文件，借助FormData对象

　　同时增加两组键值对

   processData:false,  //tell jQuery not to process the data
   contentType: false,  //tell jQuery not to set contentType


form组件上传文件

<form action="http://localhost:8081/thingsparse/addorupdthingsparse" method="post" enctype="multipart/form-data">
<input type="file" name="file" value="选择jar包"/>
<input id="submit_form" type="submit" class="btn btn-success save" value="保存"/>
</form>

 

注意：每条form表单参数都需要有name属性，以及form表单的enctype="multipart/form-data"。提交按钮type=‘submit’