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

<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 datacontentType: false,  //tell jQuery not to set contentType

form组件上传文件

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

转载于:https://www.cnblogs.com/rain-chenwei/p/9938915.html

ajax上传文件基于jquery form表单上传文件相关推荐

ajax post form上传图片,ajax怎样提交form表单与实现文件上传
这次给大家带来ajax怎样提交form表单与实现文件上传,ajax提交form表单与实现文件上传的注意事项有哪些,下面就是实战案例,一起来看一下. 前几天,发现了一些小问题.我在写后台管理页面时,需要 ...
form表单上传文件_SpringBoot中如何使用SpringMVC上传文件？
今天我们要说的这个话题很简单,不要问为啥,因为SpringBoot,哈哈.现在SpringBoot可以说人人都会用了,它的好处是显而易见的,大大的简化了配置,一起来看看吧. 我们分以下3种情况来谈这个 ...
表单ajax提交插件,jQuery Form 表单提交插件-----ajaxSubmit() 的应用
Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.ajaxSubmit() 介绍立即通过AJA ...
php js获取表单内容,jquery form表单获取内容以及绑定数据_javascript技巧
在日常开发的过程中,难免会用到form表单,我们需要获取表单的数据保存到数据库,或者拿到后台的一串json数据,要将数据绑定到form表单上,这里我写了一个基于jquery的,formHelp插件,使 ...
基于jQuery的表单验证插件：jValidate
网上基于jQuery的表单验证插件已有很多,但是这个轮子我还是继续做一个,因为这个表单验证插件是从我以前的个人JS框架移值过来的(我已慢慢投入jQuery的怀抱),并且它的验证规则书写方式也许会让你眼 ...
整理的16个有用的jQuery Form(表单)验证教程
表单在每个网站开发者必不可少的组成部份,而最烦繁的也是表单验证部份,借助于jQuery一些现有成熟的插件,可以大大减少我们的开发工作量以及减少很多重复出现的问题 ,这篇文章将整理出非常好的16篇非常有 ...
form 表单上传文件及传输数据的编码格式
form中的 action 控制请求往什么地方提交 method 请求方式如果不写默认是get 请求如果想传文件必须要把默认的urlencoded的改成enctype="multi ...
js实现多图上传和预览(包含表单上传、ajax上传)
请在这里查看示例 ☞ h5Upload示例包含的知识点有:(仅考虑手机端,pc兼容性不清,建议使用jquery版本的) 1.浏览器自带的表单上传(页面会跳转) 2.ajax上传(异步刷新.自动上传. ...
form表单上传附件的几种方法
问题描述:在网页开发过程中,当需要上传附件(图片,音频,视频等)时,常规方法是使用form表单进行提交,这里总结一下form表单提交的几种方法. 参考地址:http://www.cnblogs.com ...
jQuery form表单的serialize()参数和其他参数如何一起传给后端
在前端给后端传递参数时,有时候form表单,我们为了方便,直接可以通过 var formData=$("#formid").serialize();来统一传给后端,这样可以节省很多 ...

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

ajax上传文件基于jquery form表单上传文件相关推荐

最新文章

热门文章

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

ajax上传文件 基于jquery form表单上传文件相关推荐

最新文章

热门文章

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

ajax上传文件基于jquery form表单上传文件相关推荐