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. dm368 ipnc3.0环境搭建脚本

    前言 为了方便其他人搭建dm368 ipnc3.0环境,我写了个脚本,执行脚本就可以自动搭建好环境了,绝对的傻瓜操作了,不过有一个地方让我很郁闷,那就是在用sed替换掉某段内容的时候(143行--15 ...

  2. Deep Learning基础--理解LSTM网络

    循环神经网络(RNN) 人们的每次思考并不都是从零开始的.比如说你在阅读这篇文章时,你基于对前面的文字的理解来理解你目前阅读到的文字,而不是每读到一个文字时,都抛弃掉前面的思考,从头开始.你的记忆是有 ...

  3. 如何使用curl命令指定ip访问url

    有时我们需要测试一个url,但域名并没解析,这时为了一个简单的测试而写host或去做域名解析,显然这并不高效,而有些域名甚至是正式的域名,因此我们可有使用curl命令进行测试 方法一 curl url ...

  4. SuSE Linux Supervisor的安装与使用案例

      建议使用 root 管理员账户操作 1.安装工具 1.apache 2..Net Core(dotnet-sdk-2.0) 3.Supervisor(进程管理工具,目的是服务器一开机就启动服务器 ...

  5. Codeforces 821C Okabe and Boxes(模拟)

    题目大意:给你编号为1-n的箱子,放的顺序不定,有n条add指令将箱子放入栈中,有n条remove指令将箱子移除栈,移出去的顺序是从1-n的,至少需要对箱子重新排序几次. 解题思路:可以通过把栈清空表 ...

  6. c#元组举例

    元组的概要: 数组合并了相同类型的对象,而元组合并了不同类型的对象.元组起源于函数编程语言(如F#) ,在 这些语言中频繁使用元组.在N盯4中,元组可通过.NET Fmmework用于所有的NET语言 ...

  7. FPGA 17最佳论文导读 ESE: Efficient Speech Recognition Engine with Compressed LSTM on FPGA

    欢迎转载,转载请注明:本文出自Bin的专栏blog.csdn.net/xbinworld. 技术交流QQ群:433250724,欢迎对算法.机器学习技术感兴趣的同学加入. 后面陆续写一些关于神经网络加 ...

  8. numpy，看不懂，但很利害

    慢慢有感觉.. 截几个图看看. import numpy as np np.random.seed(42) complex_numbers = np.random.random(5) + 1j * n ...

  9. Qt5.4 webview 不能打开网址

    在使用Qwebview浏览器时不能打开网络地址,并报下面的错误 Starting E:\WorkSpace\QtWorkSpace\build-webTest-Desktop_Qt_5_4_2_MSV ...

  10. WERTYU（UVa10082）

    C++ 11 代码如下: #include<iostream> using namespace std; const char s[] = { "`1234567890-=QWE ...