案例：用Ajax实现简单的多文件上传

最新推荐文章于 2024-08-03 17:05:14 发布

置顶 Alechidden

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量196

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48030168/article/details/106993993

版权

这个小案例的静态页面比较简单，这里不贴效果图，而是放出html和css代码块。

值得一提的是，在使用Ajax请求对应的接口后，返还的是一个带有url属性的对象，这个url属性告诉我们上传以后的图片位于服务器的哪个位置。

//HTML代码
<body>
	<input type="file" multiple="multiple">
    <button>上传</button><br><br>
    <div></div>
</body>

//CSS代码
<style>
	div img {
		width: 300px;
		height: 200px;
	}
</style>

<script>
	$('button').click(function() {
		var files = $('input')[0].files;
		if (files.length <= 0) return alert('请选择需要上传的文件!');
		for (var i = 0; i < files.length; i++) {
		var formdata = new FormData();
		formdata.append('avatar', files[i]);
		setData(formdata);
		}
	})

	function setData(formdata) {
		$.ajax({
			url: 'http://www.liulongbin.top:3006/api/upload/avatar',
			data: formdata,
			method: 'post',
			processData: false,
			contentType: false,
			success: function(res) {
				console.log(res);
				var img = $('<img>');
				img[0].src = 'http://www.liulongbin.top:3006' + res.url;
				$('div').append(img);
			}
		})
	}
</script>

Alechidden

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
案例：用Ajax实现简单的多文件上传

这个小案例的静态页面比较简单，这里不贴效果图，而是放出html和css代码块。值得一提的是，在使用Ajax请求对应的接口后，返还的是一个带有url属性的对象，这个url属性告诉我们//HTML代码<body> <input type="file" multiple="multiple"> <button>上传</button><br><br> <div></div></body&g
复制链接

扫一扫