<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’
ajax上传文件 基于jquery ?form表单上传文件
原文地址：https://www.cnblogs.com/rain-chenwei/p/9938915.html