drag file upload xhr 拖拽异步上传文件
<div id="droptarget" style="width: 500px; height: 200px; background: silver">
Drop some files here
</div>
<script>
window.onload = function () {
var droptarget = document.getElementById("droptarget"); function handleEvent(event) {
output = document.getElementById("output"),
data, xhr,
files, i, len; event.preventDefault();
if (event.type == "drop") {
data = new FormData();
files = event.dataTransfer.files;
i = 0;
len = files.length; while (i < len) {
data.append("file" + i, files[i]);
i++;
} xhr = new XMLHttpRequest();
xhr.open("post", "upload.php", true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
console.log(+new Date() + "upload success");
// alert(xhr.responseText);
}
};
console.log(+new Date() + "upload start");
xhr.send(data);
}
} droptarget.addEventListener('dragenter', handleEvent, false);
droptarget.addEventListener('dragover', handleEvent, false);
droptarget.addEventListener('drop', handleEvent, false);
}; </script>
<pre id="output"></pre>
upload.php
$f = $_FILES['file0'];
var_dump($f);
drag file upload xhr 拖拽异步上传文件的更多相关文章
- 关于js异步上传文件
好久没登录博客园了,今天来一发分享. 最近项目里有个需求,上传文件(好吧,这种需求很常见,这也不是第一次遇到了).当时第一想法就是直接用form表单提交(原谅我以前就是这么干的),不过表单里不仅有文件 ...
- HTML5 jQuery+FormData 异步上传文件,带进度条
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href ...
- ajax异步上传文件和表单同步上传文件 的区别
1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...
- JS异步上传文件
直接调用Upload(option)方法,即可上传文件,不需要额外的插件辅助,采用原生js编写. /* *异步上传文件 *option参数 **url:上传路径 **data:上传的其他数据{id:& ...
- Jquery异步上传文件
我想通过jQuery异步上传文件,这是我的HTML: 1 2 3 <span>File</span> <input type="file" id=&q ...
- Servlet异步上传文件
这里需要用到插件ajaxfileupload.js,jar包:commons-fileupload-1.3.2.jar,commons-io-2.5.jar 注意红色部分的字!!!! 1.创建一个we ...
- struts2 jquery ajaxFileUpload 异步上传文件
网上搜集的,整理一下. 一.ajaxFileUpload 实现异步上传文件利用到了ajaxFileUpload.js这个文件,这是别人开发的一个jquery的插件,可以实现文件的上传并能够和strut ...
- 【转】JQuery插件ajaxFileUpload 异步上传文件(PHP版)
前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...
- 异步上传文件,ajax上传文件,jQuery插件之ajaxFileUpload
http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 一.ajaxFileUpload是一个异步上传文件的jQuery插件. ...
随机推荐
- iOS原生refresh(UIRefreshControl)
转载:http://www.2cto.com/kf/201504/392431.html // // ViewController.m // 代码自定义cell // // Created by ma ...
- SQL Server2008数据库中删除用户,提示数据库主体在该数据库中拥有 架构,无法删除
一个数据库,运行在SQL Server 2008下,数据库用户无法删除,在删除时提示“数据库主体在该数据库中拥有架构,无法删除”.原因很简单,就是由于此用户在数据库中拥有某些架构的所有权,将相关架构的 ...
- poj 3628 Bookshelf 2 基本01背包
题目大意:FJ有n头奶牛,和一个高为h的架子,给出每头奶牛高度,求使奶牛叠加起来超过架子的最低高度是多少. 题目思路:求出奶牛叠加能达到的所有高度,并用dp[]保存,最后进行遍历,找出与h差最小的dp ...
- we7 数据库
备份其他we7网站数据库 然后附加数据库,重新命名即可 不能是对其他we7数据库生成脚本,然后执行脚本,因为后台需要一些配置数据 不然后台看不到左侧的工具栏
- kali系统安装
kali live 安装到U盘 http://www.backtrack.org.cn/thread-17197-1-1.html 用Live U盘安装Kali Linux http://cn.doc ...
- make[1]: *** [/workopenwrt/trunk/staging_dir/target-mipsel_24kec+dsp_uClibc-0.9.33.2/stamp/.tools_install_nnnnn] Error 2 make[1]: Leaving directory `/work/openwrt/trunk' make: *** [world]
主要原因是编译时未连上网,编译时需要下载些插件,连接网后,重启下系统再编译下.
- PAT (Advanced Level) 1063. Set Similarity (25)
读入之后先排序. 询问的时候可以o(m)效率得到答案. #include<cstdio> #include<cstring> #include<cmath> #in ...
- JavaScript运行原理解析
原文:1.http://blog.csdn.net/liaodehong/article/details/50488098 2.Stack的三种含义 (阮一峰) 3. http://lib.csdn. ...
- Swift中的异常处理
swift中的异常处理 如果在调用系统某一个方法时,该方法最后有一个throws.说明该方法会抛出异常.如果一个方法会抛出异常,那么需要对该异常进行处理 *在swift中提供三种处理异常的方式 方式一 ...
- linux undelete
http://www.tldp.org/HOWTO/archived/Ext2fs-Undeletion-Dir-Struct/index.html http://www.giis.co.in/deb ...