HTML5拖拽文件上传的示例代码


Posted in HTML / CSS onMarch 04, 2021

上传文件

HTML5新增了文件API,提供客户端本地操作文件的可能.

我们可以通过file表单或拖放操作选择文件,还可以通过JavaScript读取文件的名称、大小、类型、和修改时间.

file类型的input表单新增了files属性,保存我们上传文件的信息,如果要实现多文件上传,可以设置input的multiple属性.

可以使用accept属性规定文件上传的MIME类型 例如’image/jpeg’

<form action="#">
        <div class="form-group">
            <label for="input_1">请选择文件</label>
            <input id="input_1" class="form-control" name="input_1" type="file">
        </div>
        <div class="form-group">
            <button id="btn_1" class="btn btn-default" type="button">读取文件信息</button>
        </div>
</form>
<pre id="result"></pre>
</div>
<script>
var btn = document.querySelector('#btn_1');
var input = document.querySelector('#input_1');
btn.addEventListener('click', function() {
    // 获取文件域中选择的文件
    // var file = input.files[0];
    var file = input.files.item(0);
    if (file) {
        result.innerHTML =
            '文件名:' + file.name + '\n文件最近修改时间:' + file.lastModifiedDate+ '\n文件类型:' + file.type + '\n文件大小:' + file.size + '字节'
    } else {
        result.innerHTML = '没有选择任何文件';
    }
});
</script>

页面拖拽操作

对于被拖拽的元素,HTML5增加了三个事件用于监听拖拽的过程

  • dragstart 拖拽开始
  • drag 正在拖拽
  • dragend 拖拽结束
<body>
    <div id="one" style="width: 300px;height: 300px;border: 1px solid red"></div>
    <div id="two" style="width: 100px;height: 100px;border: 1px solid blue" draggable="true"></div>
</body>
<script type="text/javascript">
    two.ondragstart = function(e){
        // e.preventDefault();
        console.log(e);
        e.dataTransfer.setData("Text",e.target.id);
        console.log(e.dataTransfer.getData("Text",e.target.id));
        one.innerHTML = '开始'
    }
    two.ondrag = function(e){
        one.innerHTML += '拖动中'
    }
    two.ondragend = function(e){
        one.innerHTML = '结束'
    }
</script>

想要拖拽元素,必须设置draggable属性

页面默认的动作是拖拽后回到原位

在拖动阶段,我们可以存储被拖动元素的属性或者状态到事件对象的dataTransfer中,如果出现跳转,则是浏览器默认的事件被触发,我们需要使用e.preventDefault()来阻止默认事件。

投放区的事件

对于被拖的元素而言,拖向何处则为投放区,投放区的事件如下:

  • dragenter 被拖放元素进入
  • dragover 被拖放元素移动
  • dragleave 被拖放元素离开
<body>
    <div id="one" style="width: 300px;height: 300px;border: 1px solid red"></div>
    <div id="two" style="width: 100px;height: 100px;border: 1px solid blue" draggable="true"></div>
</body>
<script type="text/javascript">
    one.ondragenter = function(e){
        // e.preventDefault();
        console.log(e);
        one.innerHTML = '开始'
    }
    one.ondragover = function(e){
        one.innerHTML += '拖动中'
    }
    one.ondragleave = function(e){
        one.innerHTML = '结束'
    }
</script>

而drop则是监听被拖拽物拖拽到投放区并松开鼠标的事件,他可以接收到dataTransfer中的数据,所以我们的页面内拖拽可以写成如下效果:

<style type="text/css">
    *{
        box-sizing: border-box;
    }
</style>
<body>
    <div id="one" style="width: 300px;height: 300px;border: 1px solid red"></div>
    <div id="two" style="width: 100px;height: 100px;border: 1px solid blue;display: flex;">
        <div style="width: 50px;height: 100px;border:1px solid black;">第一个</div>
        <div style="width: 50px;height: 100px;border:1px solid pink;">第二个</div>
    </div>
</body>
<script type="text/javascript">
one.ondragover = function(e) {
    e.preventDefault();
}
two.onmousedown = function(e){
    e.target.draggable = true;
    e.target.ondragstart = function(ev) {
        ev.dataTransfer.setData("Text", ev.target.innerHTML);
    }
    e.target.ondragend = function(){
        two.removeChild(this)
    }
}
one.ondrop = function(e) {
    var div = document.createElement('div')
    div.style = "width: 50px;height: 100px;border:1px solid black;"
    div.innerHTML = e.dataTransfer.getData("Text")
    this.appendChild(div)
}
</script>
  • 对于谷歌浏览器,e.dataTransfer.setData(key,value)会导致拖拽到投放区域外的时候浏览器默认搜索设置的值。如果需要,我们可以屏蔽它
  • 对于火狐浏览器,没有e.dataTransfer.setData(key,value)还不行。我们可以直接设置键值对为null,"";
  • 最新版本的谷歌和火狐浏览器没有发现问题
  • drop事件并不能直接触发,因为默认的松开鼠标我们的拖拽物会返回原来的位置,并不会掉落,所以我们应该阻止投放区域的默认事件.

拖拽文件上传

经过观察,事件对象中的dataTransfer也存在files属性,我们可以用熟悉的方法上传拖拽进来的文件:

<body>
    <div id="one" style="width: 300px;height: 300px;border: 1px solid red"></div>
</body>
<script type="text/javascript">
one.ondragover = function(e) {
    e.preventDefault();
}
one.ondrop = function(e) {
    e.preventDefault()
    console.log(e.dataTransfer.files[0]);
}
</script>

然后做Ajax文件上传即可

one.ondrop = function(e) {
    e.preventDefault()
    var file = e.dataTransfer.files[0];
    var formData = new FormData();
    formData.append("aa", file);
    var xml = new XMLHttpRequest();
    xml.open("post", url, false);
    xml.send(formData);
}

到此这篇关于HTML5拖拽文件上传的示例代码的文章就介绍到这了,更多相关HTML5拖拽上传内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
纯css3制作网站后台管理面板
Dec 30 HTML / CSS
CSS中垂直居中的简单实现方法
Jul 06 HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
HTML5中的Article和Section元素认识及使用
Mar 22 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
HTML5中原生的右键菜单创建方法
Jun 28 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
什么是css原子化,有什么用?
Apr 24 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 #HTML / CSS
Canvas在超级玛丽游戏中的应用详解
Feb 06 #HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 #HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 #HTML / CSS
canvas版人体时钟的实现示例
Jan 29 #HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
Jan 27 #HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
Jan 27 #HTML / CSS
You might like
PHP学习笔记之二 php入门知识
2011/01/12 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
python数据结构之二叉树的建立实例
2014/04/29 Python
Python的Django框架使用入门指引
2015/04/15 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
Python处理CSV与List的转换方法
2018/04/19 Python
python3.7.0的安装步骤
2018/08/27 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
动物科学专业毕业生的自我评价
2013/11/29 职场文书
安全责任书范文
2014/03/12 职场文书
如何写早恋检讨书
2014/09/10 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
公司员工培训管理制度
2015/08/04 职场文书
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android
mysql查看表结构的三种方法总结
2022/07/07 MySQL