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

！doctype html html ownerta charset=' utf-8 '标题www。jb51。net JS文件拖拽上传/title style div { width : 300 px；高度： 300像素边界：1像素虚线# 000;位置：绝对；前：名50%；左侧： 50%;余量：-150像素0-150像素；文本对齐：居中；font:20px/300px '微软雅黑；display:none}/style脚本窗口。onload=function(){ var oBox=document。getelementbyid(' box ')；var oM=文档。getelementbyid(' m1 ')；定义变量计时器=nulldocument。ondragover=function(){ clear time out(计时器);timer=setTimeout(function(){ obox。风格。显示='无'；},200);obox。风格。display=' block};//进入子集的时候会触发ondragover频繁触发不给放置机会obox。ondragenter=function(){ obox。innerhtml='请释放鼠标；};obox。ondragover=function(){ return false；};obox。ondragleave=function(){ obox。innerhtml='请将文件拖拽到此区域；};obox。on drop=function(ev){ var oFile=ev。数据传输。文件[0]；var reader=new FileReader()；//读取成功读者。onload=function(){ console。日志(阅读器)；};读者。onloadstart=function(){ alert('读取开始');};读者。onloadend=function(){ alert('读取结束');};读者。onabort=function(){ alert('中断');};读者。onerror=function(){ alert('读取失败');};读者。进展=函数(ev){ var scale=ev.loaded/ev.total; if(scale=0.5){ alert(1)；读者。abort()；} oM.value=scale * 100 }reader.readAsDataURL(oFile，' base64 ')；返回false }；};/script/head dymeter id=' m1 '值=' 0 ' min=' 0 ' max=' 100 '/meter div id=' box '请将文件拖拽到此区域/div/body/html使用http://tools.jb51.net/code/HtmlJsRun在线运行测试效果如下：

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

希望本文所述对大家Java脚本语言程序设计有所帮助。