标签：proc post src result cal ati code als error
<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’
标签：proc post src result cal ati code als error
原文地址：https://www.cnblogs.com/rain-chenwei/p/9938915.html
