以下是自学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. 在MAC系统里添加开机启动任务（但是怎么才能知道自己程序的固定位置呢？）

    公司最近购进了几台MAC台式电脑,要在上面为一个项目做测试. MAC这么高大上的东西,还是第一次接触,折腾了半天好不容易安装了一些需要的应用服务上去,跑了一下还不错. 公司提倡节约用电,下班之后要把所 ...

  2. Add custom and listview web part to a page in wiki page using powershell

    As we know, Adding list view web part is different from custom web part using powershell, what's mor ...

  3. Eclipse用法和技巧二十一：工程的展示途径

    用eclipse阅读代码的时候,有时候代码会变成如图一所示的样子,有时候可能是图二的样子.为什么有时候是图一有时候是图二,笔者也不是很清楚.不过怎么手动设置成图一图二,就是接下来要讲的东西. 1    ...

  4. Node.js and Forever “exited with code: 0”

    CentOs 6.5 using root acount, I have a working Node.js Express app: root@vps [/home/test/node]# npm ...

  5. Swift - 使用位运算提取颜色，合并颜色

    通常我们可以使用16进制的格式表示RGB颜色,比如0x2f88c0.通过位操作运算,能很方便的将其中的R,G,B颜色各部分分别提取出来.反之,也可以将R,G,B颜色值组合成一个完整的颜色. 1,提取颜 ...

  6. Response.AppendCookie

    //写入 protected void Button2_Click(object sender, EventArgs e) { HttpCookie cookie=new HttpCookie(&qu ...

  7. 用Delphi进行word开发

    使用以CreateOleObjects方式调用Word 实际上还是Ole,但是这种方式能够真正做到完全控制Word文件,能够使用Word的所有属性,包括自己编写的VBA宏代码.------------ ...

  8. [欧拉回路+手动开栈] poj 1780 Code

    题目链接: http://poj.org/problem? id=1780 Code Time Limit: 1000MS   Memory Limit: 65536K Total Submissio ...

  9. Android-Cannot merge new index 66195 into a non-jumbo instruction的解决的方法

    转载请注明来源:http://blog.csdn.net/goldenfish1919/article/details/33729679 用eclispe打包的时候报错: [2014-06-23 13 ...

  10. Effective C++_笔记_条款05_了解C++默认编写并调用哪些函数

    (整理自Effctive C++,转载请注明.整理者:华科小涛@http://www.cnblogs.com/hust-ghtao/) 直接上代码: 1: class Empty{}; 如果你写了这样 ...