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

时间:2021-06-24 20:31:20
<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’