master

分支 (2)

管理

管理

master

dev_test

web-test
/
jquery文件上传示.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>

	<body>
		<form enctype="multipart/form-data">
			<input id="imgFile" type="file" />
			<input id="recordFile" type="file" />
		</form>
		<input type="button" value="文件上传" onclick="fileUpload()" />
	</body>
</html>

<script type="text/javascript">
	function fileUpload() {
		let formData = new FormData()
		let imgFile = document.getElementById('imgFile').files[0] // 获取图片文件
		let recordFile = document.getElementById('recordFile').files[0] // 获取录音文件
		// 如果上传文件需要带参数
		formData.append('file', imgFile)
		formData.append('file', recordFile)
		// 发送ajax请求
		$.ajax({
			url: 'http://localhost:8080/details/img/upload',
			type: 'POST',
			dataType: 'json',
			data: formData,
			async: false,
			cache: false, // 上传文件不缓存
			contentType: false, // 因为表单已经声明enctype="multipart/form-data",所以不需要设置其他contentType
			processData: false, // 因为data是formData对象，所以不需要做数据处理
			success: function(result) {
				console.log('file upload successed')
			},
			error: function(err) {
				console.log('file upload error')
				throw new Error(err)
			}
		})
	}
</script>