纯js图片上传插件

最新推荐文章于 2025-05-22 13:15:51 发布

乌鱼鸡汤

最新推荐文章于 2025-05-22 13:15:51 发布

阅读量1.3k

点赞数 17

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/a123123sdf/article/details/137855517

目录标题

一、效果预览

支持多图片上传，删除、预览。
在这里插入图片描述

二、使用简单

导入依赖（需要依赖jquery）

<link th:href="@{/css/index.css}" rel="stylesheet"/>

<!--三方依赖-->
<script th:src="@{/js/jquery.min.js}"></script>
<!--<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>-->

<script th:src="@{/js/index.js}"></script>

绑定图片容器

<div id="img1" style="width: 205px">

</div>
const img1 = new imgFactory('img1', [], [], []);

初始化容器

 img1.init()

上传图片

//上传图片
var data={
   
   
     url:'/common/uploads',
     //上传接口文件参数名
     fileParamName:'files'
 }
 img1.upload(data,"img1",function (res) {
   
   
	 if (res.isSuccess){
   
   
	 
	 }
 })

三、完整代码

（一）index.html

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>上传图片（拍照上传、图库上传）</title>
    <link th:href="@{/css/index.css}" rel="stylesheet"/>
</head>
<body style="background-color: #F2F2F2">

<div>
    <div id="img1" style="width: 205px">

    </div>
    <div id="img2">

    <