kk Blog —— 通用基础


date [-d @int|str] [+%s|"+%F %T"]
netstat -ltunp
sar -n DEV 1

Ajax使用FormData上传文件

https://www.cnblogs.com/suflowers1700218/p/14230852.html

1 使用form表单初始化FormData对象方式上传文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form id="uploadForm" enctype="multipart/form-data">
	<input id="file" type="file" name="file"/>
	<button id="upload" type="button">upload</button>
</form>

<script>
$("#upload").click(function () {
	$.ajax({
		url: '/Default/UploadFile',
		type: 'POST',
		cache: false,
		data: new FormData($('#uploadForm')[0]),
		processData: false,
		contentType: false,
		success: function (data) {
			alert(data.result)
		}
	}).fail(function (res) {
		alert("系统错误")
	});
});
</script>

这里要注意几点:

1
2
3
4
5
6
7
8
9
processData设置为false。因为data值是FormData对象,不需要对数据做处理。

<form>标签添加 enctype="multipart/form-data" 属性。

cache设置为false,上传文件不需要缓存。

contentType设置为false,不设置contentType值,因为是由<form>表单构造的FormData对象,且已经声明了属性 enctype="multipart/form-data",所以这里设置为false。

上传后,服务器端代码需要使用从查询参数名为file获取文件输入流对象,因为<input>中声明的是name="file"

2.使用FormData对象添加字段方式上传文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
$("#upload").click(function () {
	var formData = new FormData();
	formData.append('file', $('#file')[0].files[0]);
	$.ajax({
		url: '/Default/UploadFileByFormData',
		type: 'POST',
		cache: false,
		data: formData,
		processData: false,
		contentType: false,
		success: function (data) {
			alert(data.result)
		}
	}).fail(function (res) {
		alert("系统错误")
	});
});
</script>

这里有几处不一样:

1
2
3
4
5
6
7
append()的第二个参数应是文件对象,即$('#file')[0].files[0]。

contentType也要设置为‘false’。

从代码$('#file')[0].files[0]中可以看到一个<input type="file">标签能够上传多个文件,

只需要在<input type="file">里添加multiple或multiple="multiple"属性。

3. Ajax使用FormData上传多个文件

在 input type=“file” 里添加 multiple=“multiple” 属性,选择文件时,按住Ctrl键或Shift键选择多个文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
$("#upload").click(function () {
	var formData = new FormData();
	for (var i = 0; i < $('#file')[0].files.length; i++) {
		formData.append('files', $('#file')[0].files[i]);
	}
	$.ajax({
		url: '/Default/UploadFilesByFormData',
		type: 'POST',
		cache: false,
		data: formData,
		processData: false,
		contentType: false,
		success: function (data) {
			alert(data.message)
		}
	}).fail(function (res) {
		alert("系统错误")
	});
});
</script>

language, web

« pdf预览 jquery.media.js nginx配置多个域名, http https共用配置 »