html5实现拖拽文件上传
以下是自学it网--中级班上课笔记
网址:www.zixue.it
html文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>HTML5拖拽上传</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css"> #dropzone{
width:300px;
height:300px;
border:2px dashed gray;
} #dropzone.over {
border:2px dashed orange;
} </style>
</head>
<body>
<h1>拖拽上传</h1>
<div id="dropzone"></div>
</body> <script type="text/javascript"> // 负责ajax发送数据
function up(fd) {
var xhr = new XMLHttpRequest();
xhr.open('POST','upfile.php',true); // 异步传输 // xhr.upload 这是html5新增的api,储存了上传过程中的信息
xhr.upload.onprogress = function (ev) {
var percent = 0;
if(ev.lengthComputable) {
percent = 100 * ev.loaded/ev.total;
//document.getElementById('progress').innerHTML = percent;
document.getElementById('bar').style.width = percent + '%';
}
} xhr.send(fd);
} var dz = document.getElementById('dropzone');
dz.ondragover = function (ev) {
this.className = 'over';
return false;
} dz.ondragleave = function (){
this.className = '';
} dz.ondrop = function(ev) {
//console.log(ev.dataTransfer.files[0]); var fd = new FormData();
fd.append('pic',ev.dataTransfer.files[0]); up(fd); return false; // 拦截拖放的正常行为
} </script>
</html>
upfile.php
echo move_uploaded_file($_FILES['pic']['tmp_name'],'./upload/' . $_FILES['pic']['name']) ? 'OK':'fail';
如图:
html5实现拖拽文件上传的更多相关文章
- 每日质量NPM包拖拽文件上传_react-dropzone
一.react-dropzone 官方定义: Simple HTML5-compliant drag'n'drop zone for files built with React.js. 理解: 一个 ...
- nodemailer + express + h5 拖拽文件上传 实现发送邮件
一.部署 1.部署Express 2.准备一个邮箱并开始SMTP服务 二.服务器端 三.客户端 四.效果:
- Resumable.js – 基于 HTML5 File API 的文件上传
Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...
- HTML5 进阶系列:文件上传下载
前言 HTML5 中提供的文件API在前端中有着丰富的应用,上传.下载.读取内容等在日常的交互中很常见.而且在各个浏览器的兼容也比较好,包括移动端,除了 IE 只支持 IE10 以上的版本.想要更好地 ...
- Java Web使用Html5 FormData实现多文件上传
前一阵子,迭代一个线上的项目,其中有一个图片上传的功能,之前用的ajaxfileupload.js来实现上传的,不过由于ajaxfileupload.js,默认是单文件上传(虽然可以通过修改源码的方法 ...
- HTML5 通过 FileReader 实现文件上传
概述 在页面中上传时,之前一般都是需要使用form表单进行上传.html5 中提供了FileReader 可以将文件转换成Base64编码字符串,因此就可以直接使用 AJAX实现文件上传. 实现代码 ...
- HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条
页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...
- drag file upload xhr 拖拽异步上传文件
<div id="droptarget" style="width: 500px; height: 200px; background: silver"& ...
- bat cmd dos 通过拖拽参数 上传 截取拖拽上传文件名
echo off setlocal enabledelayedexpansion :: L 小写 for /l %%i in (1,1,10000) do ( :con set /p a= selec ...
随机推荐
- m2eclipse简单使用,创建Maven项目 ,运行mvn命令(转)
前面介绍了如何安装m2eclipse,现在,我们使用m2ecilpse导入Hello World项目. 选择菜单项File,然后选择Import,我们会看到一个Import对话框,在该对话框中选择Ge ...
- codeforces 487E Tourists
如果不是uoj上有的话(听说这是China Round),我有可能就错过这道题目了(这是我有史以来为oi写的最长的代码,用了我一天TAT!). 题目 传送门. 一个连通无向图,点上有权,支持两种操作: ...
- OPENSSL库的使用-DES篇
一.单DES算法ECB模式加解密 1.使用函数DES_set_key_unchecked设置密钥 2.使用函数DES_ecb_encrypt来进行数据加解密 void DES_ecb_encrypt( ...
- STM32启动模式
STM32三种启动模式对应的存储介质均是芯片内置的,它们是: 1)用户闪存 = 芯片内置的Flash.2)SRAM = 芯片内置的RAM区,就是内存啦.3)系统存储器 = 芯片内部一块特定的区域,芯片 ...
- 不是什么时候都可以用栈来声明对象并使用(自动释放)——Delphi里到处都是编译器魔法,并且自动帮助实例化界面元素指针
一直都喜欢这样显示窗口,因为简单高效: void MainWidget::ShowMyWindow() { MyWidget form(this); form.resize(,); form.exec ...
- WCF技术剖析之十七:消息(Message)详解(下篇)
原文:WCF技术剖析之十七:消息(Message)详解(下篇) [爱心链接:拯救一个25岁身患急性白血病的女孩[内有苏州电视台经济频道<天天山海经>为此录制的节目视频(苏州话)]]< ...
- 基于perl面向对象开发的微信机器人
<pre name="code" class="html">[root@wx03 lib]# ls -ltr total 40 -rw-r--r-- ...
- 用python -i写交互式shell
cabinet是公司的一个数据存储服务,需要添加一个shell client,查看数据,做简单操作. 用python写了一个比想象的简单.代码如下: #! /usr/bin/python -i # c ...
- CF 319D(Have You Ever Heard About the Word?-模拟)
D. Have You Ever Heard About the Word? time limit per test 6 seconds memory limit per test 256 megab ...
- UC网盘被关停 将与阿里淘盘合并?(案例说明云盘的成本才是重点,技术不是问题;与巨头竞争是重点)
UC网盘被关停 将与阿里淘盘合并? 二八2016-03-18 08:05:36阿里巴巴 网盘 产品阅读(0)评论(12) UC网盘项目组日前发布公告称将停止网盘存储服务,原因为配合国家对云盘传播淫秽色 ...