文件拖拽上传

 1 <style>
 2         div{
 3             width: 300px;
 4             height: 300px;
 5             border:1px dashed #000;
 6             position:absolute;
 7             top: 50%;
 8             left: 50%;
 9             margin:-150px 0 0 -150px;
10             text-align:center;
11             font:20px/300px ‘微软雅黑‘;
12             display:none;
13         }
14     </style>
15     <script>
16                             window.onload = function () {
17                                 var oBox = document.getElementById(‘box‘);
18                                 var oM = document.getElementById(‘m1‘);
19                                 var timer = null;
20                                 document.ondragover = function(){
21                                     clearTimeout(timer);
22                                     timer = setTimeout(function(){
23                                         oBox.style.display = ‘none‘;
24                                     },200);
25                                     oBox.style.display = ‘block‘;
26                                 };
27                                 //进入子集的时候 会触发ondragover 频繁触发 不给ondrop机会
28                                 oBox.ondragenter = function(){
29                                     oBox.innerHTML = ‘请释放鼠标‘;
30                                 };
31                                 oBox.ondragover = function(){
32                                     return false;
33                                 };
34                                 oBox.ondragleave = function(){
35                                     oBox.innerHTML = ‘请将文件拖拽到此区域‘;
36                                 };
37                                 oBox.ondrop = function(ev){
38                                     var oFile = ev.dataTransfer.files[0];
39                                     var reader = new FileReader();
40                                     //读取成功
41                                     reader.onload = function(){
42                                         console.log(reader);
43                                     };
44                                     reader.onloadstart = function(){
45                                         alert(‘读取开始‘);
46                                     };
47                                     reader.onloadend = function(){
48                                         alert(‘读取结束‘);
49                                     };
50                                     reader.onabort = function(){
51                                         alert(‘中断‘);
52                                     };
53                                     reader.onerror = function(){
54                                         alert(‘读取失败‘);
55                                     };
56                                     reader.onprogress = function(ev){
57                                         var scale = ev.loaded/ev.total;
58                                         if(scale>=0.5){
59                                             alert(1);
60                                             reader.abort();
61                                         }
62                                         oM.value = scale*100;
63                                     };
64                                     reader.readAsDataURL(oFile,‘base64‘);
65                                     return false;
66                                 };
67                             };
68                         </script>
69                         </head>
70                         <body>
71                         <meter id="m1" value="0" min="0" max="100"></meter>
72                             <div id="box">请将文件拖拽到此区域</div>
73                         </body>
时间: 2024-10-25 03:23:09

文件拖拽上传的相关文章

Dropzone.js实现文件拖拽上传

dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 查看演示 下载源码 使用Dropzone 我们可以建立一个正式的上传form表单,并且给表单一个.dropzone的class. <form id="mydropzone" action="/upload.php" class="dropzone">&l

SpringMvc+jQuery 文件拖拽上传、选择上传

最近做了个简易的文件上传功能,jsp版本的,后续会完善更多的功能,不过现在已经能用了,需要的小伙伴,直接引用下面的文件内容直接copy到自己的项目中就ok了,效果如图: fileupload.css: .fileupload_box { position:relative; width: 100%; height: 100%; border: 3px dashed #E5E5E5; text-align: center; z-index: 2000; cursor: pointer; margi

图片拖拽上传至服务器

今天遇到一个新的问题,就是图片拖拽上传至服务器,一般,我们会想到使用ajax,但是现在问题是ajax默认是没有提交事件的,也就是说,我们拖拽上传图片后,没法将上传的图片信息发送到服务器,这时候就要模拟form表单的提交了. 既然要上传,这里首先要讲到的就是图片拖拽上传了. oDiv.ondrop = function(e) { e.preventDefault(); //获取拖拽过来的对象,文件对象集合 var fs = e.dataTransfer.files; //若为表单域中的file标签

jQuery插件之路(三)——文件上传(支持拖拽上传)

好了,这次咱一改往日的作风,就不多说废话了,哈哈.先贴上源代码地址,点击获取.然后直接进入主题啦,当然,如果你觉得我有哪里写的不对或者欠妥的地方,欢迎留言指出.在附上一些代码之前,我们还是先来了解下,上传文件的时候需要利用的一些必要的知识. 首先我们要说的就是FileReader对象,这是一个HTML5提出的,专门用来异步的读取用户计算机上文件的对象,这里有详细的介绍.所以如果我们想要使用它,那么首先我们得先创建一个FileReader对象. var fr = new FileReader()

原生API实现拖拽上传文件实践

功能: 拖拽上传文件.图片,上传的进度条,能够同时上传多个文件. 完整的demo地址:https://github.com/qcer/FE-Components/tree/master/QDrag 涉及到的API: 1.HTML5的拖拽事件:dragenter,dragover,drop等 2.XMLHttpRequest  Level2 3.FormData 4.(扩展:HTML5的File API) 概述: 1.利用拖拽实践的API将一个普通的div自定义成一个放置目标,这里有一个技巧是放置

[开源应用]利用HTML5+resumableJs拖拽上传大文件

前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性提交所有的内容进内存是不现实的.大文件带来问题还有是否支持断点传输和多文件同时传输. 本文以resumableJs为例,介绍了如何在ASP.NET中实现大文件传输.同时本文利用了Html5的新特性:支持拖拽. 本文的主要技术点在于:如何接收resumableJs的传送内容(官网不太清楚)和如何合并文件,难度并不高. 注:原博客中,此文章为原站点个人代码备份所用,注释不多,如有不懂,请在评论中给出. 效果: ASPX File: <htm

基于 jq 实现拖拽上传 APK 文件,js解析 APK 信息

技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档 参考:前端解析ipa.apk安装包信息 -- app-info-parser 支持功能 点击或拖拽上传 apk 文件 校验文件类型及文件大小 js 解析 apk 文件信息展示并通过上传接口提交给后端 支持上传过程中取消上传 支持上传成功显示上传信息 支持解析.上传等友好提示 支持从历史记录(所有已上传文件)中选择一个 支持假文件处理,比如

使用ivx实现拖拽上传文件功能的经验总结

在实际案例中经常会使用到上传文件的功能,不过普通的上传文件需要用户再去一层一层查找文件的路径并不是十分的方便,今天给大家讲一种使用拖拽放置容器实现上传文件的方法.1.拖拽放置容器拖拽放置容器位于拓展组件中的特殊功能容器类,我们可以给它添加事件拖拽放置,此事件的动作中我们能获取一个返回值--拖拽文件,在调试记录中打印出来可以看到里面包含文件的名称.大小和类型等信息.不过拖拽放置容器只是把文件拖拽进来,上传到服务器还是要使用文件接口组件.文件接口上传文件动作的回调中会收到文件上传到服务器后的一些信息

windows客户端开发--使你的输入框具有拖拽上传的功能

今天谈一天windows客户端拖拽上传功能. 其实主要是拖拽功能,上传是自己实现的. DragAcceptFiles 函数 最重要的就是这个函数了,看看作用: Registers whether a window accepts dropped files 原型: VOID DragAcceptFiles( HWND hWnd, BOOL fAccept ); 参数: hWnd Type: HWND The identifier of the window that is registering