前端JS特效第34波:jQuery支持拖拽图片上传的图片批量上传插件

jQuery支持拖拽图片上传的图片批量上传插件,先来看看效果:

部分核心的代码如下:

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery支持拖拽图片上传的图片批量上传插件</title>

<link rel="stylesheet" type="text/css" href="css/webuploader.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style>
	.width_auto{
		width: 900px;
		margin: 100px auto;
	}
</style>

</head>
<body><script src="/demos/googlegg.js"></script>

<div class="width_auto">
    <div id="container">
        <!--头部,相册选择和格式选择-->
        <div id="uploader" >

            <div class="item_container">
                <div id="" class="queueList" >
                    <div id="dndArea" class="placeholder">
                        <div id="filePicker"></div>
                    </div>
                </div>
            </div>
            <div class="statusBar" style="display:none;">
                <div class="progress">
                    <span class="text">0%</span>
                    <span class="percentage"></span>
                </div><div class="info"></div>
                <div class="btns">
                    <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery-1.9.min.js"></script>
<script src="js/webuploader.js"></script>
<script src="js/jquery.sortable.js"></script>
<script src="js/upload.js"></script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
</div>
</body>
</html>

全部代码:jQuery支持拖拽图片上传的图片批量上传插件

相关推荐
携欢3 小时前
PortSwigger靶场之CSRF where token is tied to non-session cookie通关秘籍
运维·服务器·前端
我是华为OD~HR~栗栗呀3 小时前
华为OD-21届考研-Java面经
java·前端·c++·python·华为od·华为·面试
詩句☾⋆᭄南笙3 小时前
CSS美化网页元素
前端·css·html
程序0073 小时前
HTML+JS+CSS实现汽车官网
javascript·css·html
陈随易3 小时前
不使用 Husky 和 Lint-staged,实现 Git 提交前自动格式化代码
前端·后端·程序员
范特东南西北风3 小时前
roocode + vscode + api_key = free GPT-5
前端·ai编程
golang学习记3 小时前
从0死磕全栈之Next.js 缓存与数据重新验证
前端
BraveAriesZyc3 小时前
axios的使用
前端
没有鸡汤吃不下饭3 小时前
H5移动端页面实现快递单号条形码/二维码扫描,亲测可行!!
前端·javascript·vue.js
云枫晖3 小时前
JS核心知识-模块化
前端·javascript