以下是自学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实现拖拽文件上传的更多相关文章

  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. HDOJ 1217 Floyed Template

    解题思路:1.map简单应用2.Floyd算法的变形,之后判断dis[i][i],如果大于1,则存在利润! #include <iostream> #include <stdio.h ...

  2. Android_简单笔记一

    入门学习Android的简单笔记(已经安装好了开发环境ADT) 一.关于 AndroidManifest.xml文件 1. android:icon和android:label定义了应用程序安装后显示 ...

  3. 《C语言深度解剖》面试题整理

    请在40分钟内完成以下20道C语言基础题.在没有任何提示的情况下,如果能得满分,那么你可以扔掉本书了,你的水平已经大大超过了作者:如果能的80分以上,说明你的C语言基础还不错,学习本书可能会比较轻松: ...

  4. 解说cocos2d-x几种画图方法的用法与思考

    CCRenderTexture 自己的理解 CCRenderTexture类似一张空白的“画布“,用户通过自定义笔刷(CCSprite*),在touch事件中把笔刷的移动痕迹“记录”起来,从而“画”出 ...

  5. Collections.sort方法对list排序的两种方式

    Collections.sort( )分为两部分,一部分为排序规则,一部分为排序算法 . 规则用来判断对象,算法则考虑如何进行排序 对于自定义对象,sort()不知道规则,所以无法比较,这种情况下一定 ...

  6. Microsoft.AspNetCore.Routing路由

    Microsoft.AspNetCore.Routing路由 这篇随笔讲讲路由功能,主要内容在项目Microsoft.AspNetCore.Routing中,可以在GitHub上找到,Routing项 ...

  7. WCF技术剖析之十二：数据契约（Data Contract）和数据契约序列化器（DataContractSerializer）

    原文:WCF技术剖析之十二:数据契约(Data Contract)和数据契约序列化器(DataContractSerializer) [爱心链接:拯救一个25岁身患急性白血病的女孩[内有苏州电视台经济 ...

  8. Genymotion 插件在 Eclipse 和 Android Studio 中点击后无法初始化 Initialize Engine: failed 解决方法

    Genymotion 插件已更新至 1.0.6,目前无法初始化的问题已经解决. ------------------------------------------------------------ ...

  9. solr总结 第六部分：solr查询语法

    1.基本查询语法 q:全文查询.schema.xml里面定义了如下两块.eg q=ibm即表示org_name或者org_weisite里面出现ibm的document都可以被匹配到.KeyWords ...

  10. InPageError c000009c使用chkdsk修复磁盘

    chkdsk e: /f /r 回车运行就表示修复e盘上的错误,并找到坏扇区恢复可读取的信息. 其它: [Path} FileName] 指定需要 chkdsk 检查碎片整理的文件或文件集的位置和名称 ...