Ajax实现异步上传图片
时间:2018-11-07
本文章向大家介绍Ajax实现异步上传图片,需要的朋友可以参考一下
今天发现了一种ajax上传图片的方式,是以前没有用过的,首先来说下为什么要用这种方式。是因为原来后台是用的form表单的方式来提交表单数据的。但是觉得呢,这种方式不太好,因为要刷新页面,前台只用控制台看不到传输的参数(如果哪位大神知道怎么看到,请不吝赐教),所以我们就改成了ajax的方式,结果后台老哥说,前端改改就行了,后端不用改。然后我去找到了这种ajax提交表单的方式。废话不多说,直接看代码。
1 var formData = new FormData();//首先这里新建一个空对象
2 formData.append("file", document.getElementById("file").files[0]);//这里是一个图片的input框,id为file。appen的第一个参数,是后台的传输的字段
3 formData.append("reward_name", reward_name);
4 formData.append("reward_id", reward_id);
5 formData.append("reward_num", reward_num);
6 formData.append("exchange_num", exchange_num);
7 $.ajax({
8 url:"__ROOT__/index.php/Administration/Gamemanage/add_icon",
9 type:"post",
10 processData:false, //这里需要注意,一定要写false,因为有图片,所以不需要序列化
11 contentType:false, //这里也是一个需要注意的点。也要写false
12 data:formData,
13 dataType:'json',
14 success:function(data){
15 if(data.info=="添加成功"){
16 alert(data.info);
17 window.reload();
18 }else{
19 alert(data.info);
20 }
21 }
22 });
这种方法和我上次写的那个是不一样的,这次的方法是直接提交一个文件。我们来看下这种方式的请求头,和一般的ajax是不一样的。请看截图
里面的参数就是我上面代码中写的参数,大家可以一一对应起来。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 基础知识 | R语言数据分析之控制流
- 基础知识 | R语言数据处理之日期值的转换
- 云开发 CloudBase CMS 内容管理系统正式开源啦!
- 高维数据 | R语言数据可视化之热力图
- 高维数据 | R语言数据可视化之日历图
- 打卡群刷题总结0804——二叉树的中序遍历
- 基础知识 | R语言数据管理之SQL语句
- 文本挖掘| 某作者文章的词频统计排序
- spring注解配置之@Configuration
- TS核心知识点总结及项目实战案例分析
- 用Python开发 写个消消乐小游戏
- 原理+代码|Python实战多元线性回归模型
- nestjs+vue+ts打造一个酷炫的星空聊天室(含完整数据库设计)
- JUnit 5基础指南
- 记录一则expdp任务异常处理案例