javascript
2019-03-05
2019-03-05
本篇文章主要总结以下几点js的表单提交。
1 | $.ajax({ |
一、普通的提交方法
1、最先接触的就是这种
1
2
3
4
5
6
7
8
9
10
11
12
13$.ajax({
url:'',
type:'POST',
data:{ //你要传的参数
id:'',
name:''
}
})
.then((res)=>{
console.log(res)
},(res)=>{
alert('error')
})浏览器显示提交后的数据：
2、serialize()方法。
将表单内容序列化成一个字符串。自动去取表单中有name属性的值。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<form>
<input hidden name="id" value="001">
<input name="username" value="zhangsan">
</form>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$.ajax({
url:'form.php',
type:'POST',
data:$('form').serialize()
})
.then((res)=>{
console.log(res)
},(res)=>{
alert('error')
})
</script>注意：一定要设置name，否则无法取到值。效果跟上图一样。
- 一些链接：
- $.ajax请求中datatype的含义
- $.ajax中的contentType
- 认证(authentication)和授权(authorization)的区别
二、FormData()方式提交
- 提示：FormData()
- 1、用一些键值对来模拟一系列表单控件。
- 2、异步上传二进制文件。
1、简单使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<form>
<input hidden name="id" value="001">
<input name="username" value="zhangsan">
</form>
var formdata=new FormData($('form')[0])
$.ajax({
url: '',
type: 'POST',
data: formdata, // 上传formdata封装的数据
dataType: 'JSON',
cache: false, // 不缓存
processData: false, // jQuery不要去处理发送的数据
contentType: false, // jQuery不要去设置Content-Type请求头
})
.then((res)=>{
console.log(res)
},(res)=>{
alert('error')
})
- 注意：
- （1）new FormData的参数是一个DOM对象，而非jQuery对象。即：
var formdata=new FormData($('form')[0]) - （2）要设置jQuery不要去处理发送的数据，即：processData: false，否则会报错，你可能很无解的错误。
二、FormData对象的操作
用FormData对单个内容进行提交，操作方法全部在原型当中。
1
2
3
4
5
6
7var formdata = new FormData()
formdata.append('id', '001') // 键值对的方式：key,value
formdata.append('user', 'zhangsan')
获取 formdata.get('user') //zhangsan
删除 formdata.delete('user')
在ajax提交数据：data:formdata使用FormData上传参数可以上传input=”file”单选或多选的文件，可以传参数值和图片、文件相互混合的数据，都转化为二进制进行上传。
- 附FormData一些用法
三、上传图片
- 1、单张图片上传，显示图片名称、预览
主要在File对象上入手。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45<form enctype="multipart/form-data"> // 注意加上"enctype"属性，以二进制方式上传
<input type="file" name="file" accept="image/*" id="img"/>
<!-- 仅限制于图片，但不是必须的 -->
</form>
<div>
<img src=""/>
<p></p>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$('#img').on('change',(e)=>{
console.log(e)
var file=e.target
$('p').html(file.files[0].name)
$('img').attr('src',getImgURL(file.files[0]))
})
function getImgURL(file) {
var url = null ;
// 下面函数执行的结果是一样的，针对不同的浏览器执行不同的 js 函数
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // firefox
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit、chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
// 推荐使用FormData对象上传
var formdata=new FormData($('form')[0])
$.ajax({
url:'',
type:'POST',
data:formdata,
cache: false, // 不缓存
processData: false, // jQuery不要去处理发送的数据
contentType: false // jQuery不要去设置Content-Type请求头
})
.then((res)=>{
console.log(res)
},(res)=>{
alert('error')
})
</script>File对象转化为base64
1
2
3
4
5
6
7
8
9
10
11$('#img').on('change',(e)=>{
var file=e.target
$('p').html(file.files[0].name)
// 以下为关键转化部分
var reader=new FileReader();
reader.onload=function(e){ // 异步操作
console.log( reader.result); //或者 e.target.result都是一样的，都是base64码
$('img').attr('src',reader.result)
}
reader.readAsDataURL(file.files[0])
})2、多张图片上传，显示图片名称、预览
- 主要也在File对象上入手。F12查看当前event对象。
- 代码：
1
2
3
4
5<form enctype="multipart/form-data">
<input type="file" name="file" accept="image/*" multiple id="img"/>
<!--多选：加multiple属性即可-->
</form>
<div></div>
1 | <script> |
- 简陋效果图：
四、大文件上传
- 个人推荐使用插件，因为大文件上传要涉及到暂停、取消、断点续传等，以下是在网上找的资源。曾经也用过纯js的大文件上传，但效果并不怎么样。
- 此外，插件就不说了，哪个好用用哪个，说实话没用过不知道。
- Javascript上传超大文件
- 纯js实现最简单的文件上传