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学习之2D转换功能详解
Dec 23 HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
Jan 09 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 HTML / CSS
HTML5 背景的显示区域实现
Jul 09 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 HTML / CSS
Html5大屏数据可视化开发的实现
Jun 11 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源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
IE8 浏览器Cookie的处理
2009/01/31 Javascript
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
Js基础学习资料
2010/11/23 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
jquery使用hide方法隐藏指定id的元素
2015/03/30 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
python冒泡排序算法的实现代码
2013/11/21 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
python爬虫框架talonspider简单介绍
2017/06/09 Python
python版微信跳一跳游戏辅助
2018/01/11 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
Python聊天室程序(基础版)
2018/04/01 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
python实现flappy bird小游戏
2018/12/24 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
人事档案接收函
2014/01/12 职场文书
职位说明书范文
2014/05/07 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
教师师德师风整改措施
2014/10/24 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang