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. 在浏览器中输入www.baidu.com后执行的全过程

    链接 http 请求过程——当我们在浏览器输入 www.baidu.com,然后回车之后的详解. 1)域名解析(域名 www.baidu.com变为 ip 地址). 1.浏览器搜索自己的DNS缓存(维 ...

  2. Spring Cloud Feign 在调用接口类上，配置熔断 fallback后，输出异常

    Spring Cloud Feign 在调用接口类上,配置熔断 fallback后,出现请求异常时,会进入熔断处理,但是不会抛出异常信息. 经过以下配置,可以抛出异常: 将原有ErrorEncoder ...

  3. rpmdb: Thread/process 9180/139855524558592 failed: Thread died in Berkeley DB library

    使用yum安装出现问题:rpmdb: Thread/process 9180/139855524558592 failed: Thread died in Berkeley DB library 解决 ...

  4. NLP基础 成分句法分析和依存句法分析

    正则匹配: .除换行符所有的 ?表示0次或者1次 *表示0次或者n次 a(bc)+表示bc至少出现1次 ^x.*g$表示字符串以x开头,g结束 |或者 http://regexr.com/ 依存句法分 ...

  5. cordova 整合 webpack vue

    cordova 是hybrid开发app的一个框架,通过js桥接原生api实现了js调用原生的一些功能:本打算学习下阿里的weex:可是一直打包不了,加上之前也用过cordova,打算使用cordov ...

  6. PHP之数组(遍历顺序)

    作者: Laruence(   ) 本文地址: http://www.laruence.com/2009/08/23/1065.html PHP的数组, 如果用foreach来访问, 遍历的顺序是固定 ...

  7. overflow:scroll 在 iOS上滚动不流畅的问题

    添加下面属性: -webkit-overflow-scrolling: touch;

  8. ZOJ 3953 Intervals

    线段树,排序. 按照$R$从小到大排序之后逐个检查,如果$L$,$R$最大值不超过$2$,那么就把这个区间放进去,区间$+1$,否则不能放进去. #include<bits/stdc++.h&g ...

  9. 洛谷P1503 鬼子进村 [平衡树，STL]

    题目传送门 鬼子进村 题目背景 小卡正在新家的客厅中看电视.电视里正在播放放了千八百次依旧重播的<亮剑>,剧中李云龙带领的独立团在一个县城遇到了一个鬼子小队,于是独立团与鬼子展开游击战. ...

  10. Python之路【第六篇】:模块与包

    目录 一 模块 3.1 import 3.2 from ... import... 3.3 把模块当做脚本执行 3.4 模块搜索路径 3.5 编译python文件 3.6  标准模块 3.7  dir ...