当前位置:首页 > 编程教程 > javascript技术文章 > JS实现的文件拖拽上传功能示例

JS实现的文件拖拽上传的代码功能

  • 发布时间:
  • 作者:码农之家
  • 点击:199

这篇文章主要知识点是关于JS、文件、拖拽上传、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

你不知道的JavaScript 下卷
  • 类型:JavaScript大小:7 MB格式:PDF作者:凯尔
立即下载

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

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.jb51.net 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.jb51.net/code/HtmlJsRun在线运行测试效果如下:

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

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript表单(form)操作技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

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

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

javascript 相关电子书
学习笔记
网友NO.534649

js css3实现图片拖拽效果

本文实例为大家分享了css3实现图片拖拽效果的具体代码,供大家参考,具体内容如下 !DOCTYPE htmlhtml head meta charset="UTF-8" title/title style type="text/css" body{ text-align: center; } .container{ display: flex; justify-content: center; } .colorBox{ width: 100px; height: 100px; border:1px solid gray; margin: 0 20px; } .showBox{ width: 100px; height: 100px; border:5px dashed gray; margin: 0 auto; } .colorBox:nth-child(1){ background-color: orange; } .colorBox:nth-child(2){ background-color: skyblue; } .colorBox:nth-child(3){ background-color: yellowgreen; } img{ border: 1px solid gray; margin:0 20px; } /style /head body !--h1{支持拖拽的元素}+img[src='images/lf.jpg']*3+h1{需要开启拖拽的元素}+div.colorBox*3+h1{展示框}+div.showBox-- h1支持拖拽的元素/h1 img src="images/lf.jpg" alt="" / img src="images/nm.jpg" alt="" / img src="images/sl.jpg" alt="" / h1需要开启拖拽的元素/h1 div class='container' !--添加开启拖拽属性……

网友NO.486489

Nodejs+express+html5 实现拖拽上传

一、前言 文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传。给用户体验带来很大问题。html5开始支持拖拽上传的需要的api。nodejs也是一个最近越来越流行的技术,这也是自己第一次接触nodejs,在nodejs开发中,最常用的开发框架之一是expess,它是一个类似mvc模式的框架。结合html5、nodejs express实现了拖拽上传的功能。 二、基础知识普及 1、NodeJs基础知识 nodejs简单来说就是一个可以让js在服务端也能运行的开发平台,nodejs发展非常很快,很多国内公司也已经开始使用比如淘宝等。传统的web应用程序开发平台依靠多线程来实现高并发请求的响应。而nodejs采用了单线程、异步式IO、事件驱动的设计模型,给nodejs带来了巨大的性能提升。这也是nodejs最大的特点,在nodejs中,所有的IO操作都……

网友NO.622686

js实现登录框鼠标拖拽效果

效果图: 代码如下: !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" title登录框鼠标拖拽效果/title style type="text/css" body { background: url("https://timgsa.baidu.com/timg?imagesize=b9999_10000di=e97c96dfe7860297d1968c30adc862a2src=http%3A%2F%2Fpic1.5442.com%3A82%2F2015%2F0409%2F01%2F15.jpg%2521960.jpg") no-repeat top center #ffffff; background-size: 100%; padding: 0; margin: 0; font-size: 12px; font-family: "微软雅黑", sans-serif; } .ui-dialog { width: 380px; position: absolute; z-index: 9000; top: 100px; left: 100px; border: 1px solid #d5d5d5; background-color: #ffffff; /*display: none;*/ } .ui-dialog-title { height: 48px; line-height: 48px; padding-left: 20px; color: #535353; font-size: 16px; background-color: #f5f5f5; border-bottom: 1px solid #efefef; cursor: move; } .ui-dialog-title-closebutton { width: 16px; height: 16px; display: inline-block; position: absolute; right: 20px; color: #000; text-decoration: unset; } .ui-dialog-title-closebutton:hover {……

网友NO.879015

完美实现js拖拽效果 return false用法详解

本文为大家分享了完美实现js拖拽效果的具体代码,告诉大家return false的用法,供大家参考,具体内容如下 1.return false可以用来阻止默认事件即系统默认事件。例如通过阻止默认事件,来对textarea中的值进行范围限制(通过限制keycode的数值),也可以自定义在页面中的右键菜单(oncontextmenu)。 2.在鼠标移动(mousemove)等事件中,是需要给事件传一个参数,保证程序的正常运行。而为了兼容取事件方法为:var oEvent=ev||event; 3.在节点中创建一个新的节点的方法为: var oBox=document.createElement('div'); oBox.className='box'; oBox.style.left = oDiv.offsetLeft+'px'; oBox.style.top = oDiv.offsetTop+'px'; oBox.style.width = oDiv.offsetWidth+'px'; oBox.style.height = oDiv.offsetHeight+'px'; document.body.appendChild(oBox); //注意,在创建完之后一定要将创建好的节点加入body中!!! 下列为完整代码: !DOCTYPE htmlhtml lan……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

版权投诉 / 书籍推广 / 赞助:QQ:520161757