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

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

www.ddpool.cn JS文件拖拽上传

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;

}

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;

};

请将文件拖拽到此区域

使用http://tools.ddpool.cn/code/HtmlJsRun在线运行测试效果如下：

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

php拖拽上传_JS实现的文件拖拽上传功能示例相关推荐

java实现文件上传下载功能,javaweb文件的下载和上传功能的实现
没有文件上传的普通form表单上传上传的数值可以在servlet中获取得到 String s_bPublishDate=request.getParameter("fname") ...
html七牛云图片文件上传,使用Js将文件图片视频上传到七牛云详细教程-Fun言
前言因为项目需要,需要将一些较大文件上传到七牛云,以前都是通过数据流上传到服务端,然后在服务端进行上传操作,因为以前文件都很小所以无所谓,但是要是几百M的文件就不行了,所以就采用前端js直接上传到七 ...
用ftp上传到服务器视频文件夹,ftp 上传文件夹到服务器
ftp 上传文件夹到服务器内容精选换一换上传的文件和上传的文件夹中包含的文件支持的格式请参见支持的文件格式.文件上传:从本地上传:在Projects Explorer视图中选中一个文件夹,依次单 ...
Struts2 - 上传任意多个文件
Struts2 - 上传任意多个文件一.上传单个文件在Struts1.x中已经提供了用于上传文件的组件.而在Struts2中提供了一个更为容易操作的上传文件组件.所不同的是,Struts1.x的 ...
python 大文件分片上传_Python实现大文件分片上传
转载请注明出处:http://blog.csdn.net/jinixin/article/details/77545140 引言想借着这篇文章简要谈谈WebUploader大文件上传与Python结合 ...
php实现上传,轻松实现php文件上传功能
PHP 文件上传通过 PHP,可以把文件上传到服务器. 本章节实例在 test 项目下完成,目录结构为: test |-----upload # 文件上传的目录 |----- ...
vue 图片复制黏贴上传_# quill-image-extend-module ：完成vue-quill-editor图片上传，复制粘贴，拖拽...
vue-quill-editor的加强模块, 功用: 供应图片上传到服务器的功用复制插进去拖拽插进去显现上传进度显现上传胜利或许失利支撑与其他模块一同运用(比方调解图片大小) Install ...
vue拖动添加模块展示_vue-quill-editor的增强模块，提供图片上传，复制插入，拖拽插入...
sorry everyone, 由于作者自身原因,没有精力和时间处理issues,该插件已经不做维护了,希望大家见谅. quill-image-extend-module vue-quill-edit ...
jquery文件上传插件 uploadify java_jQuery文件上传插件Uploadify使用指南
对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持 Flash,主要特性:支持多文件上传.HTML5版本可拖拽上传.实时上传进度条显示.强大的参数定制功能,如文件大小. ...

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

php拖拽上传_JS实现的文件拖拽上传功能示例相关推荐

最新文章

热门文章