前端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支持拖拽图片上传的图片批量上传插件

相关推荐
掘金安东尼2 小时前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试
剑亦未配妥3 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师9 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny079 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy10 小时前
css的基本知识
前端·css
昔人'10 小时前
css `lh`单位
前端·css
前端君10 小时前
实现最大异步并发执行队列
javascript
Nan_Shu_61411 小时前
Web前端面试题(2)
前端
知识分享小能手12 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队13 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能