以下是自学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. Android事件模型之interceptTouchEvnet ,onTouchEvent关系正解

    首先,看Android的官方文档正解 onInterceptTouchEvent()与onTouchEvent()的机制: 1. down事件首先会传递到onInterceptTouchEvent() ...

  2. 第十一章 认识与学习BASH

    系统支持的shell在   /etc/shells里面 Bash Shell 的功能: 1.命令修补能力(histroy) 2.命令与档案补全功能 3.命令别名设定功能 4.工作前景背景控制 5.支持 ...

  3. Websense一面、二面及Offer

    1.  写脚本打印当前目录(子目录)下文件内容中包含abc字符串文件 2.  用C写一个管道通信的程序:父进程向子进程写一个”hello word”字符串,子进程输出. 3.  解释I-node. 4 ...

  4. PHP - 代码分离

    总代码: <?php /* * Version:1.0 * CreateTime:2015年11月11日 * Author:HF_Ultrastrong *///引入公共文件,在公共文件中创建, ...

  5. 配置SAP 采购合同审批

    需求: 采购合同类型是MK,采购组织是POSC,采购组PGC,标识:估计价格是空,总价有值0.00 - 9999999999.00 RMB 满足以上条件的时候需要审批该合同. 配置: spro-> ...

  6. springMVC 使用jstl

    jsp页面获取数据,感觉最方便的就是使用jstl+EL了,各种封装好的函数非常简单易用,接下来写如何使用jstl: 1.下载jstl-1.2_1.jar 2.由于项目是: xmlns="ht ...

  7. jquery 如何动态添加、删除class样式方法介绍

    获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class 取与设置样式 获取class和设置class都可以使用attr()方法 ...

  8. <转载>div+css布局教程之div+css常见布局结构定义

    在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索 ...

  9. jQuery EasyUI API 中文文档 - 分隔按钮（splitbutton）

    <html> <head> <script src="jquery-easyui/jquery.min.js"></script> ...

  10. Windows 和 Linux下使用socket下载网页页面内容（可设置接收/发送超时）的代码

    主要难点在于设置recv()与send()的超时时间,具体要注意的事项,请看代码注释部分,下面是代码: #include <stdio.h> #include <sys/types. ...