jq单图片上传预览效果 -六月初技术站

jq单图片上传预览效果

六月初 JavaScipt 2019-03-06 17:45:14

图片上传是网站很重要的一个组成部分，那么关于图片上传后预览。我们要如何处理呢？

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/jquery.js"></script>
<script src="js/upload.js"></script>
<body>
<h3>可将图片拖拽到下框中</h3>
<div id="drop_area"></div>
<script type="text/javascript">
var dragImgUpload = new DragImgUpload("#drop_area",{
	img:"img/upload.png",//自定义初始图片
	callback:function (files) {
		//回调函数，可以传递给后台等等
		var file = files[0];
		console.log(file.name);
	}
})
</script>
</body>
</html>