前端页面文件拖拽上传模块html/css/js代码示例

作者：阿依古丽丹_736 | 来源：互联网 | 2023-05-19 12:03

最近给卫生局做一个表格上传可视化系统，算是小有成果。今天把项目中的文件拖拽上传模块分离出来，做了一个独立的小demo,并把相关代码打包上传到了我的github中，为了其他学习者和开发者提供拙见

最近给卫生局做一个表格上传/可视化系统，算是小有成果。今天把项目中的文件拖拽上传模块分离出来，做了一个独立的小demo,并把相关代码打包上传到了我的github中，为了其他学习者和开发者提供拙见。

gitHub地址：https://github.com/codeplay2015/dragToUpload

由于代码中我的注释很详尽，所以具体逻辑实现及不介绍了，大家直接看代码及能明白。现在简单列一个功能清单和一些用到的知识点清单：

模态框

文件的批量上传

使用formData API 封装数据并通过ajax方法提交

读取拖放文件，ondrop事件 dataTransfer对象

清空所有文件

知识点：

单例模式：构建一个单例模式的formData容器

事件冒泡，事件委托：动态添加删除单个文件的方法

css各种布局，BFC

CSS 伪类 link vistied hover active

html 离线操作文档：创建fragment 离线操作，提高性能，减少浏览器的重绘和回流

原型链，原型方法：为formData对象添加一个删除所有文件的方法

CSS伪对象，结合after伪对象画一个‘X’号，放在模态框右上角表示退出按钮

截图：
整体界面

点击‘拖拽上传’按钮

拖拽文件到虚线框，文件拖入会边框变红提示
这里写图片描述
上传成功，弹出提示

—————————-、
代码
1. html:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="stylesheet" href="demo.css">
head>
<body>
    
    <div class="overlay">div>
    
    <div id="modal" class="dropbox">
        <div class="items-container">
            <div id="close" style="cursor:pointer;float: right;width:20px">
                <span class="css-close">span>
            div>
            <div>
                <p class="head"><b>拖拽文件至此b>p>
                <div class="content" id="content">
                    <table class="table">
                        <tbody class="tbody">tbody>
                    table>
                div>
                <div class="footer">
                    <button class="btn" onclick="upload()">开始上传button>
                div>
                <a href='#' onclick='clearAll()' style='position:absolute;bottom:10px;right:30px;'>清空所有a>
            div>
        div>
    div>
    
    <div style="margin-top:40vh;text-align: center;">
        <p>拖拽上传演示模板。点击下方按钮，弹出模态框p>
        <button class="btn" onclick="showModal()">点击上传button>
    div>
    
    <script src="jquery-1.10.2.js" type="text/Javascript">script>
    <script src="demo.js" type="text/Javascript">script>
body>
html>

CSS

.overlay{
 z-index: 99;
 position:fixed;
 display: none;
 top:0;
 left:0;
 width: 100%;
 height: 100%;
 background-color: #333;
 opacity:0.5;
}
.dropbox{
 z-index: 100;
 display: none;
 position: fixed;
 width:500px;
 height:520px;
 margin:auto;
 top:0;
 right:0;
 bottom: 0;
 left:0;
 background-color: #fff;
 border-radius:6px;
 transition-duration: 0.9s;
 -webkit-transition-duration: 0.9s;
 overflow:hidden;
 text-align: center;
}
.items-container{
 padding: 10px;
}
.content{
 border: 3px dashed gray;
 border-radius: 10px;
 margin: 10px 20px;
 height:400px;
 overflow: auto;
 padding:2px 8px;
}

.head{
 margin:0px;
 font-size:30px;
 color:#aaa;
}
.footer{
 margin:5px auto
}
.btn{
 border-radius: 20px;
 box-sizing: border-box;
 border-width: 2px;
 background-color: transparent;
 font-size: 14px;
 font-weight: 500;
 padding: 7px 18px
}
/*画一个叉号，表示推出界面*/
.css-close{display:inline-block; width:15px; height:2px; background:#000; font-size:0; line-height:0;vertical-align:middle;-webkit-transform: rotate(45deg);}
.css-close:after { content:'.'; display:block; width:15px; height:2px; background:#000;-webkit-transform: rotate(90deg);}

/*表格样式*/
.table{
 width:100%;
 border-collapse: collapse;
}
#content tr:first-child td{
 border-top-width: 0px;
}
#content tr td:last-child{
 cursor: pointer;
 color: red;
}
#content tr td{
 padding: 8px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow:ellipsis;
 border-top:1px solid #9A9A9A;
}
#content tr:hover{
 background-color: #d5d5d5;
}
#content tr:active{
 background-color: #9A9A9A;
}
a:link{
 color:blue;
}
a:visited{
 color:blue;
}
a:hover{
 color:blue;
}
a:active{
 color:red;
}

js代码：

function showModal() {  //打开上传框
    var modal = document.getElementById('modal');
    var overlay = document.getElementsByClassName('overlay')[0];
    overlay.style.display = 'block';
    modal.style.display = 'block';
}
function closeModal() {  //关闭上传框
    var modal = document.getElementById('modal');
    var overlay = document.getElementsByClassName('overlay')[0];
    overlay.style.display = 'none';
    modal.style.display = 'none';
}
//用DOM2级方法为右上角的叉号和黑色遮罩层添加事件：点击后关闭上传框
document.getElementsByClassName('overlay')[0].addEventListener('click', closeModal, false);
document.getElementById('close').addEventListener('click', closeModal, false);

//利用html5 FormData() API,创建一个接收文件的对象，因为可以多次拖拽，这里采用单例模式创建对象Dragfiles
var Dragfiles=(function (){
    var instance;
    return function(){
        if(!instance){
            instance = new FormData();
        }
        return instance;
    }
}());
//为Dragfiles添加一个清空所有文件的方法
FormData.prototype.deleteAll=function () {
    var _this=this;
    this.forEach(function(value,key){
        _this.delete(key);
    })
}

//添加拖拽事件
var dz = document.getElementById('content');
dz.Ondragover= function (ev) {
    //阻止浏览器默认打开文件的操作
    ev.preventDefault();
    //拖入文件后边框颜色变红
    this.style.borderColor = 'red';
}

dz.Ondragleave= function () {
    //恢复边框颜色
    this.style.borderColor = 'gray';
}
dz.Ondrop= function (ev) {
    //恢复边框颜色
    this.style.borderColor = 'gray';
    //阻止浏览器默认打开文件的操作
    ev.preventDefault();
    var files = ev.dataTransfer.files;
    var len=files.length,
        i=0;
    var frag=document.createDocumentFragment();  //为了减少js修改dom树的频度，先创建一个fragment，然后在fragment里操作
    var tr,time,size;
    var newForm=Dragfiles(); //获取单例
    var it=newForm.entries(); //创建一个迭代器，测试用
    while(i        tr=document.createElement('tr');
        //获取文件大小
        size=Math.round(files[i].size * 100 / 1024) / 100 + 'KB';
        //获取格式化的修改时间
        time = files[i].lastModifiedDate.toLocaleDateString() + ' '+files[i].lastModifiedDate.toTimeString().split(' ')[0];
        tr.innerHTML=''+files[i].name+''+time+''+size+'删除';
        console.log(size+' '+time);
        frag.appendChild(tr);
        //添加文件到newForm
        newForm.append(files[i].name,files[i]);
        //console.log(it.next());
        i++;
    }
    this.childNodes[1].childNodes[1].appendChild(frag);
    //为什么是‘1’？文档里几乎每一样东西都是一个节点，甚至连空格和换行符都会被解释成节点。而且都包含在childNodes属性所返回的数组中.不同于jade模板
}
function blink()
{
  document.getElementById('content').style.borderColor = 'gray';
}

//ajax上传文件
function upload(){
    if(document.getElementsByTagName('tbody')[0].hasChildNodes()==false){
        document.getElementById('content').style.borderColor = 'red';
        setTimeout(blink,200);
        return false;
    }
    var data=Dragfiles(); //获取formData
    $.ajax({
        url: 'upload',
        type: 'POST',
        data: data,
        async: true,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
            alert('succeed!')  //可以替换为自己的方法
            closeModal();
            data.deleteAll(); //清空formData
            $('.tbody').empty(); //清空列表
        },
        error: function (returndata) {
            alert('failed!')  //可以替换为自己的方法
        }
    });
}
// 用事件委托的方法为‘删除’添加点击事件，使用jquery中的on方法
$(".tbody").on('click','tr td:last-child',function(){
    //删除拖拽框已有的文件
    var temp=Dragfiles();
    var key=$(this).prev().prev().prev().text();
    console.log(key);
    temp.delete(key);
    $(this).parent().remove();
});
//清空所有内容
function clearAll(){
    if(document.getElementsByTagName('tbody')[0].hasChildNodes()==false){
        document.getElementById('content').style.borderColor = 'red';
        setTimeout(blink,300);
        return false;
    }
    var data=Dragfiles(); 
    data.deleteAll(); //清空formData
    //$('.tbody').empty(); 等同于以下方法
    document.getElementsByTagName('tbody')[0].innerHTML='';
}

推荐阅读

go
微软头条实习生分享深度学习自学指南

本文介绍了一位微软头条实习生自学深度学习的经验分享，包括学习资源推荐、重要基础知识的学习要点等。作者强调了学好Python和数学基础的重要性，并提供了一些建议。 ... [详细]

蜡笔小新 2023-12-14 20:58:32
char
Android 新闻App的本地服务器搭建教程

本文介绍了在开发Android新闻App时，搭建本地服务器的步骤。通过使用XAMPP软件，可以一键式搭建起开发环境，包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表，并设置相应的属性。最后，给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]

蜡笔小新 2023-12-14 17:15:19
go
伊振华作品 | 沈阳市智慧城市运行管理中心的设计与建设

本文介绍了设计师伊振华受邀参与沈阳市智慧城市运行管理中心项目的整体设计，并以数字赋能和创新驱动高质量发展的理念，建设了集成、智慧、高效的一体化城市综合管理平台，促进了城市的数字化转型。该中心被称为当代城市的智能心脏，为沈阳市的智慧城市建设做出了重要贡献。 ... [详细]

蜡笔小新 2023-12-14 16:35:39
go
20211101CleverTap参与度和分析工具功能平台学习/实践

1.应用场景主要用于学习CleverTap的使用,该平台主要用于客户保留与参与平台.为客户提供价值.这里接触到的原因,是目前公司用到该平台的服务~2.学习操作 ... [详细]

蜡笔小新 2023-12-14 10:25:12
go
如何用UE4制作2D游戏文档——计算篇

篇首语：本文由编程笔记#小编为大家整理，主要介绍了如何用UE4制作2D游戏文档——计算篇相关的知识，希望对你有一定的参考价值。 ... [详细]

蜡笔小新 2023-12-14 09:50:34
schema
使用在线工具jsonschema2pojo根据json生成java对象

本文介绍了使用在线工具jsonschema2pojo根据json生成java对象的方法。通过该工具，用户只需将json字符串复制到输入框中，即可自动将其转换成java对象。该工具还能解析列表式的json数据，并将嵌套在内层的对象也解析出来。本文以请求github的api为例，展示了使用该工具的步骤和效果。 ... [详细]

蜡笔小新 2023-12-13 21:23:45
schema
XML介绍与使用的概述及标签规则

本文介绍了XML的基本概念和用途，包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则，包括标签的尖括号和合法标识符的组成，标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读，读者可以对XML的基本知识有一个全面的了解。 ... [详细]

蜡笔小新 2023-12-13 17:39:50
go
CF：3D City Model（小思维）问题解析和代码实现

本文通过解析CF：3D City Model问题，介绍了问题的背景和要求，并给出了相应的代码实现。该问题涉及到在一个矩形的网格上建造城市的情景，每个网格单元可以作为建筑的基础，建筑由多个立方体叠加而成。文章详细讲解了问题的解决思路，并给出了相应的代码实现供读者参考。 ... [详细]

蜡笔小新 2023-12-13 14:17:11
go
Go Cobra命令行工具入门教程

本文介绍了Go语言实现的命令行工具Cobra的基本概念、安装方法和入门实践。Cobra被广泛应用于各种项目中，如Kubernetes、Hugo和Github CLI等。通过使用Cobra，我们可以快速创建命令行工具，适用于写测试脚本和各种服务的Admin CLI。文章还通过一个简单的demo演示了Cobra的使用方法。 ... [详细]

蜡笔小新 2023-12-12 20:02:41
char
SpringMVC接收请求参数的方式总结

本文总结了在SpringMVC开发中处理控制器参数的各种方式，包括处理使用@RequestParam注解的参数、MultipartFile类型参数和Simple类型参数的RequestParamMethodArgumentResolver，处理@RequestBody注解的参数的RequestResponseBodyMethodProcessor，以及PathVariableMapMethodArgumentResol等子类。 ... [详细]

蜡笔小新 2023-12-11 19:55:40
char
使用JSONObiect和Gson相关方法实现json数据与kotlin对象的相互转换

本文介绍了如何使用JSONObiect和Gson相关方法实现json数据与kotlin对象的相互转换。首先解释了JSON的概念和数据格式，然后详细介绍了相关API，包括JSONObject和Gson的使用方法。接着讲解了如何将json格式的字符串转换为kotlin对象或List，以及如何将kotlin对象转换为json字符串。最后提到了使用Map封装json对象的特殊情况。文章还对JSON和XML进行了比较，指出了JSON的优势和缺点。 ... [详细]

蜡笔小新 2023-12-11 16:20:50
function
实现下拉列表，点击其他位置自动隐藏效果的三种方式比较

目录实现效果：实现环境实现方法一：基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]

蜡笔小新 2023-12-14 15:03:14
function
九度OnlineJudge之1002：Grading问题的解决方法

本文介绍了九度OnlineJudge中的1002题目“Grading”的解决方法。该题目要求设计一个公平的评分过程，将每个考题分配给3个独立的专家，如果他们的评分不一致，则需要请一位裁判做出最终决定。文章详细描述了评分规则，并给出了解决该问题的程序。 ... [详细]

蜡笔小新 2023-12-14 13:00:09
replace
Java String与StringBuffer的区别及其应用场景

本文主要介绍了Java中String和StringBuffer的区别，String是不可变的，而StringBuffer是可变的。StringBuffer在进行字符串处理时不生成新的对象，内存使用上要优于String类。因此，在需要频繁对字符串进行修改的情况下，使用StringBuffer更加适合。同时，文章还介绍了String和StringBuffer的应用场景。 ... [详细]

蜡笔小新 2023-12-13 19:21:06
go
sklearn数据集库中的常用数据集类型介绍

本文介绍了sklearn数据集库中常用的数据集类型，包括玩具数据集和样本生成器。其中详细介绍了波士顿房价数据集，包含了波士顿506处房屋的13种不同特征以及房屋价格，适用于回归任务。 ... [详细]

蜡笔小新 2023-12-13 17:45:15

阿依古丽丹_736

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章