JS实现的文件拖拽上传功能示例


Posted in Javascript onMay 21, 2018

本文实例讲述了JS实现的文件拖拽上传功能。分享给大家供大家参考,具体如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3water.com JS文件拖拽上传</title>
<style>
div{
 width: 300px;
 height: 300px;
 border:1px dashed #000;
 position:absolute;
 top: 50%;
 left: 50%;
 margin:-150px 0 0 -150px;
 text-align:center;
 font:20px/300px '微软雅黑';
 display:none;
}
</style>
<script>
 window.onload = function () {
  var oBox = document.getElementById('box');
  var oM = document.getElementById('m1');
  var timer = null;
  document.ondragover = function(){
   clearTimeout(timer);
   timer = setTimeout(function(){
    oBox.style.display = 'none';
   },200);
   oBox.style.display = 'block';
  };
  //进入子集的时候 会触发ondragover 频繁触发 不给ondrop机会
  oBox.ondragenter = function(){
   oBox.innerHTML = '请释放鼠标';
  };
  oBox.ondragover = function(){
   return false;
  };
  oBox.ondragleave = function(){
   oBox.innerHTML = '请将文件拖拽到此区域';
  };
  oBox.ondrop = function(ev){
   var oFile = ev.dataTransfer.files[0];
   var reader = new FileReader();
   //读取成功
   reader.onload = function(){
    console.log(reader);
   };
   reader.onloadstart = function(){
    alert('读取开始');
   };
   reader.onloadend = function(){
    alert('读取结束');
   };
   reader.onabort = function(){
    alert('中断');
   };
   reader.onerror = function(){
    alert('读取失败');
   };
   reader.onprogress = function(ev){
    var scale = ev.loaded/ev.total;
    if(scale>=0.5){
     alert(1);
     reader.abort();
    }
    oM.value = scale*100;
   };
   reader.readAsDataURL(oFile,'base64');
   return false;
  };
 };
</script>
</head>
<body>
<meter id="m1" value="0" min="0" max="100"></meter>
 <div id="box">请将文件拖拽到此区域</div>
</body>
</html>

使用http://tools.3water.com/code/HtmlJsRun在线运行测试效果如下:

JS实现的文件拖拽上传功能示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
Jquery 一次处理多个ajax请求的代码
Sep 02 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
Jan 06 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 Javascript
js实现的在本地预览图片功能示例
Nov 09 Javascript
js实现简单贪吃蛇游戏
May 15 Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 #Javascript
Vue二次封装axios为插件使用详解
May 21 #Javascript
详解vue的diff算法原理
May 20 #Javascript
详解使用vue-admin-template的优化历程
May 20 #Javascript
vuex进阶知识点巩固
May 20 #Javascript
简单的三步vuex入门
May 20 #Javascript
vue项目如何刷新当前页面的方法
May 18 #Javascript
You might like
PHP 的 __FILE__ 常量
2007/01/15 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
大学生毕业的自我评价分享
2014/01/02 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
七年级作文之秋游
2019/10/21 职场文书
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android