SpringMVC 实现文件上传(三:文件上传[前台])

最新推荐文章于 2024-08-15 17:36:47 发布

唐小枝

最新推荐文章于 2024-08-15 17:36:47 发布

阅读量244

点赞数

分类专栏： SSM

本文链接：https://blog.csdn.net/weixin_41583535/article/details/117718058

版权

HTML JavaScript 文件上传 FormData AJAX

关键词由CSDN通过智能技术生成

SSM 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、HTML代码

公交车牌：<input type="text" id="busnumber" value="111" />
<br /> 
公交照片：<input type="file" id="file" />
<br />
<input type="submit" value="上传" onclick="fileup();">

二、js代码

		function fileup() {
            // 车牌号
			var busnumber = $("#busnumber").val();
            // 文件对象
			var input = $("#file")[0];
            // 判断文件对象是否有值
			if(input.value) {
                // 用于发送文件的对象
				var files = new FormData();
                // 将文件存储在对象中
				files.append('files', input.files[0]);
                // 将车牌号存储在对象中
				files.append('busnumber', busnumber);
                // 通过ajax进行文件上传
				$.ajax({
					url: 'http://localhost:8080/ssmdemo02/test/uploadPictures',
					type: 'post',
					cache: false,
					data: files,
					processData: false,
					contentType: false
				}).fail(function(){
					alert("新增成功！")
				})
			}
		}

三、完整代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

	公交车牌：<input type="text" id="busnumber" value="111" />
	<br /> 公交照片：
	<input type="file" id="file" />
	<br />
	<input type="submit" value="上传" onclick="fileup();">
	</body>
	<script>
		function fileup() {
			var busnumber = $("#busnumber").val();
			var input = $("#file")[0];
			if(input.value) {
				var files = new FormData();
				files.append('files', input.files[0]);
				files.append('busnumber', busnumber);
				$.ajax({
					url: 'http://localhost:8080/ssmdemo02/test/uploadPictures',
					type: 'post',
					cache: false,
					data: files,
					processData: false,
					contentType: false
				}).fail(function(){
					alert("新增成功！")
				})
			}
		}

	</script>

</html>