以下是自学it网--中级班上课笔记

网址：www.zixue.it

html文件

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
  3. <head>
  4. <title>HTML5拖拽上传</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta name="description" content="" />
  7. <meta name="keywords" content="" />
  8. <style type="text/css">
  9.  
  10. #dropzone{
  11. width:300px;
  12. height:300px;
  13. border:2px dashed gray;
  14. }
  15.  
  16. #dropzone.over {
  17. border:2px dashed orange;
  18. }
  19.  
  20. </style>
  21. </head>
  22.     <body>
  23.         <h1>拖拽上传</h1>
  24.         <div id="dropzone"></div>
  25.     </body>
  26.  
  27.     <script type="text/javascript">
  28.  
  29.     // 负责ajax发送数据
  30.     function up(fd) {
  31.         var xhr = new XMLHttpRequest();
  32.         xhr.open('POST','upfile.php',true); // 异步传输
  33.  
  34.         // xhr.upload 这是html5新增的api,储存了上传过程中的信息
  35.         xhr.upload.onprogress = function (ev) {
  36.             var percent = 0;
  37.             if(ev.lengthComputable) {
  38.                 percent = 100 * ev.loaded/ev.total;
  39.                 //document.getElementById('progress').innerHTML = percent;
  40.                 document.getElementById('bar').style.width = percent + '%';
  41.             }
  42.         }
  43.  
  44.         xhr.send(fd);
  45.     }
  46.  
  47. var dz = document.getElementById('dropzone');
  48. dz.ondragover = function (ev) {
  49.     this.className = 'over';
  50.     return false;
  51. }
  52.  
  53. dz.ondragleave = function (){
  54.     this.className = '';
  55. }
  56.  
  57. dz.ondrop = function(ev) {
  58.     //console.log(ev.dataTransfer.files[0]);
  59.  
  60.     var fd = new FormData();
  61.     fd.append('pic',ev.dataTransfer.files[0]);
  62.  
  63.     up(fd);
  64.  
  65.     return false; // 拦截拖放的正常行为
  66. }
  67.  
  68. </script>
  69. </html>

upfile.php

  1. echo move_uploaded_file($_FILES['pic']['tmp_name'],'./upload/' . $_FILES['pic']['name']) ? 'OK':'fail';

如图：

html5实现拖拽文件上传的更多相关文章

  1. 每日质量NPM包拖拽文件上传_react-dropzone

    一.react-dropzone 官方定义: Simple HTML5-compliant drag'n'drop zone for files built with React.js. 理解: 一个 ...

  2. nodemailer + express + h5 拖拽文件上传 实现发送邮件

    一.部署 1.部署Express 2.准备一个邮箱并开始SMTP服务 二.服务器端 三.客户端 四.效果:

  3. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  4. HTML5 进阶系列：文件上传下载

    前言 HTML5 中提供的文件API在前端中有着丰富的应用,上传.下载.读取内容等在日常的交互中很常见.而且在各个浏览器的兼容也比较好,包括移动端,除了 IE 只支持 IE10 以上的版本.想要更好地 ...

  5. Java Web使用Html5 FormData实现多文件上传

    前一阵子,迭代一个线上的项目,其中有一个图片上传的功能,之前用的ajaxfileupload.js来实现上传的,不过由于ajaxfileupload.js,默认是单文件上传(虽然可以通过修改源码的方法 ...

  6. HTML5 通过 FileReader 实现文件上传

    概述 在页面中上传时,之前一般都是需要使用form表单进行上传.html5 中提供了FileReader 可以将文件转换成Base64编码字符串,因此就可以直接使用 AJAX实现文件上传. 实现代码 ...

  7. HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条

    页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...

  8. drag file upload xhr 拖拽异步上传文件

    <div id="droptarget" style="width: 500px; height: 200px; background: silver"& ...

  9. bat cmd dos 通过拖拽参数 上传 截取拖拽上传文件名

    echo off setlocal enabledelayedexpansion :: L 小写 for /l %%i in (1,1,10000) do ( :con set /p a= selec ...

随机推荐

  1. 使用jQuery的attr方法来修改onclick值

    这篇文章主要介绍了通过jQuery的attr修改onclick值的解决方法 ,需要的朋友可以参考下 var js = "alert('B:' + this.id); return false ...

  2. cocos2d-x游戏开发系列教程-坦克大战游戏之子弹和地图碰撞

    上篇文章实现了坦克与地图碰撞的检测, 这篇我们继续完成子弹和地图的碰撞检测. 1.先设计一个子弹类Bullet,如下所示: class Bullet : public CCSprite { publi ...

  3. pomelo研究笔记-RPCclient

    1. mailbox数据收发模块 一个RPC客户端可能同一时候须要调用多个远端(server)提供的服务.在pomelo里每一个server抽象为一个mailbox.先来看看mailbox的实现: v ...

  4. 创建服务类PO

    转载:https://blogs.sap.com/2014/03/04/creating-a-simple-service-po-using-bapipocreate1bapipochange/ Cr ...

  5. C++操作符的优先级

    C++操作符的优先级 C++操作符的优先级 操作符及其结合性 功能 用法 L L L :: :: :: 全局作用域 类作用域 名字空间作用域 ::name class::name namespace: ...

  6. 怎样学习HTML5?

    怎样学习HTML5?这个话题,问的人非常多,随便百度一下就能看到各种各样的回答.只是感觉每种回答都不给力.以下我给出一个自己理解的HTML5学习的路线图,依照这个路线图学习以后,一般的HTML5项目开 ...

  7. Ural1109_Conference(二分图最大匹配/匈牙利算法/网络最大流)

    解题报告 二分图第一题. 题目描写叙述: 为了參加即将召开的会议,A国派出M位代表,B国派出N位代表,(N,M<=1000) 会议召开前,选出K队代表,每对代表必须一个是A国的,一个是B国的; ...

  8. 使用POI来实现对Excel的读写操作

    事实上我感觉直接贴代码就好了.代码里面差点儿做到每一行一个凝视.应该看起来会比較简单 代码托管在github上:https://github.com/chsj1/ExcelUtils package ...

  9. unix命令: ifconfig

    ifconfig 命令被用来: 1.为一个网卡分配一个IP地址 2.设置本地环路界面 3.分配一个子网掩码(可选) HP-UX: # /usr/sbin/ifconfig lan0 lan0: fla ...

  10. 一些Windows API导致的Crash以及使用问题总结

    RegQueryValueEx gethostbyname/getaddrinfo _localtime64 FindFirstFile/FindNextFile VerQueryValue Crea ...