# 💍 文件上传

  • 我们这里实现的文件上传的功能不是通过 Vue—teact 现在主流的框架实现的,这里的话我们是通过 Bootstrap 框架实现的,当然实现文件
  • 上传这个功能呢,可以使用多种办法实现,这里呢我就用 Bootstrap 来实现文件上传的功能。
  • 此上传功能有 / 删除 / 预览 / 左右排序 / 功能这个功能是一个可以满足你在项目中的需求。

# 💍 效果如如下:

image.png

  • 图片大小可以自定义上传
  • 图片一次可以上传多少张,自定义即可.
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>cupload例子</title>
</head>
<body>

<h3 align="center">初始化加载图片(5张, 已有三张)</h3>
<div id="cupload-1" align="center"></div>

</body>
<script src="static/js/cupload.js"></script>
<script type="text/javascript">
var cupload6 = new Cupload ({
ele : '#cupload-1',
num : 5,
data : ["./static/image/1.jpg", "./static/image/2.png", "./static/image/3.jpg"],
);

</script>
</html>

# 💍 总结

# 如果有伙伴需要 js 代码的请下方留言!

以上就是本文关于前端中的文件上传代码详解的全部内容,希望对大家有所帮助。感兴趣的朋友可以继续参阅本站其他前端相关专题,如有不足之处,欢迎留言指出。感谢朋友们对本站的支持!

更新于 阅读次数

请我喝[茶]~( ̄▽ ̄)~*

码坑 微信支付

微信支付

码坑 支付宝支付

支付宝支付

码坑 QQ支付

QQ支付