AJAX拖拽上传

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    .box {

      width: 300px;

      height: 300px;

      border: 1px solid #000;

      text-align: center;

      line-height: 300px;

      font-size: 40px;

    }

  </style>

</head>

<body>

  <div class="box">+</div>

  <script>

    var box = document.querySelector('.box');

    box.ondragover = function (e) {

      e.preventDefault();

    }

    box.ondrop = function (e) {

      console.log(e.dataTransfer)

      e.preventDefault();

      var xhr = new XMLHttpRequest();

      xhr.onreadystatechange = function () {

        if (xhr.readyState == 4 && xhr.status == 200) {

          console.log(xhr.responseText)

        }

      }

      xhr.open('POST', './server.php', true);

      var formdata = new FormData();

      formdata.append('pic', e.dataTransfer.files[0]);

      formdata.append('name', 'luyao');

      xhr.send(formdata);

    }

  </script>

</body>

</html>


//server.php

<?php

	$rand = rand(1,1000).'.jpg';

	move_uploaded_file($_FILES['pic']['tmp_name'], './uploads/'.$rand);

	echo '/uploads/'.$rand;

ajax拖拽上传文件的更多相关文章

  1. 原生API实现拖拽上传文件实践

    功能: 拖拽上传文件.图片,上传的进度条,能够同时上传多个文件. 完整的demo地址:https://github.com/qcer/FE-Components/tree/master/QDrag 涉 ...

  2. Thinkphp拖拽上传文件-使用webuploader插件（自己改动了一些地方）——分片上传

    html页面: <!DOCTYPE html> <html class="js cssanimations"> <head> <meta  ...

  3. Xshell拖拽上传文件插件

    lrzsz是一款在linux里可代替ftp上传和下载的程序.在linux中支持直接拖拽上传的插件:同时也支持rz和sz进行命令上传和下载. 插件安装 yum -y install lrzsz 上传(r ...

  4. 实现拖拽上传文件的一款小控件——dropzone

    由于专注所以专业.非常多小巧的东西乍一看非常不起眼,却在特定的领域表现不俗,就是由于集中了热情. dropzone就是这样一款小控件,实现拖拽上传.它不依赖于其他像jquery等JS库.并且支持多方面 ...

  5. js拖拽上传 文件上传之拖拽上传

    由于项目需要上传文件到服务器,于是便在文件上传的基础上增加了拖拽上传.拖拽上传当然属于文件上传的一部分,只不过在文件上传的基础上增加了拖拽的界面,主要在于前台的交互, 从拖拽的文件中获取文件列表然后调 ...

  6. Linux拖拽上传文件 lrzsz

    首先安装lrzsz 命令为:yum install lrzsz 安装完毕后直接将.tar.gz格式的文件拖如xshell的窗口内就会自动上传.

  7. html5 拖拽上传文件时，屏蔽浏览器默认打开文件

    参考: https://www.cnblogs.com/kingsm/p/9849339.html

  8. input文件上传（上传单个文件/多选文件/文件夹、拖拽上传、分片上传）

    //上传单个/多个文件 <input title="点击选择文件" id="h5Input1" multiple="" accept= ...

  9. Dropzone.js实现文件拖拽上传

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...

随机推荐

  1. svn add --no-ignore

    提交新代码时:svn add --no-ignore  /dir   不加的话可能会漏提交某些依赖或文件. Svn st -q --no-ignore. 提交时不需要加

  2. java程序out of memory【转】

    相信大家都有感触,线上服务内存OOM的问题,是最难定位的问题,不过归根结底,最常见的原因: 本身资源不够 申请的太多 资源耗尽 58到家架构部,运维部,58速运技术部联合进行了一次线上服务内存OOM问 ...

  3. 008 BlockingQueue理解

    原文https://www.cnblogs.com/WangHaiMing/p/8798709.html 本篇将详细介绍BlockingQueue,以下是涉及的主要内容: BlockingQueue的 ...

  4. Deep Learning基础--理解LSTM/RNN中的Attention机制

    导读 目前采用编码器-解码器 (Encode-Decode) 结构的模型非常热门,是因为它在许多领域较其他的传统模型方法都取得了更好的结果.这种结构的模型通常将输入序列编码成一个固定长度的向量表示,对 ...

  5. MD5做为文件名。机器唯一码有电脑的CPU信息和MAC地址，这两个信息需要在linux或unix系统下才能获取吧。

    可以采用机器(电脑)唯一码 + 上传IP + 当前时间戳 + GUID ( + 随机数),然后MD5做为文件名.机器唯一码有电脑的CPU信息和MAC地址,这两个信息需要在linux或unix系统下才能 ...

  6. 设计模式（一）工厂模式Factory（创建型）（转）

    原文链接:http://blog.csdn.net/hguisu/article/details/7505909 设计模式一 工厂模式Factory 在面向对象编程中, 最通常的方法是一个new操作符 ...

  7. /bin、/sbin、/usr/bin、/usr/sbin目录Linux执行文档的区别

    /bin./sbin./usr/bin./usr/sbin目录的区别   在linux下我们经常用到的四个应用程序的目录是/bin./sbin./usr/bin./usr/sbin .而四者存放的文件 ...

  8. Android学习笔记（三） UI布局

    每一个布局都有其适合的方式,另外,这几个布局元素可以相互嵌套应用,做出美观的界面. 一.线性布局(LinearLayout) 线性布局,这个东西,从外框上可以理解为一个div,他首先是一个一个从上往下 ...

  9. EF – 7.一对多关联

    5.6.8 <一对多关联(上)> 5.6.9 <一对多关联(下)> 一对多的关联,可以说是整个数据库应用程序中最常见的一种关联类型了,因此,必须高度重视这种关联类型CRUD的实 ...

  10. 【Mac】Chrome中添加截图扩展插件FireShot方法

    FireShot是一款可以使用谷歌浏览器快速捕捉当前网页中元素的chrome截图插件,在谷歌浏览器中安装FireShot插件以后可以对网页中整个屏幕或者是网页的部分视图进行截图操作,在截图之后用户还可 ...