ajax拖拽上传文件
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拖拽上传文件的更多相关文章
- 原生API实现拖拽上传文件实践
功能: 拖拽上传文件.图片,上传的进度条,能够同时上传多个文件. 完整的demo地址:https://github.com/qcer/FE-Components/tree/master/QDrag 涉 ...
- Thinkphp拖拽上传文件-使用webuploader插件（自己改动了一些地方）——分片上传
html页面: <!DOCTYPE html> <html class="js cssanimations"> <head> <meta ...
- Xshell拖拽上传文件插件
lrzsz是一款在linux里可代替ftp上传和下载的程序.在linux中支持直接拖拽上传的插件:同时也支持rz和sz进行命令上传和下载. 插件安装 yum -y install lrzsz 上传(r ...
- 实现拖拽上传文件的一款小控件——dropzone
由于专注所以专业.非常多小巧的东西乍一看非常不起眼,却在特定的领域表现不俗,就是由于集中了热情. dropzone就是这样一款小控件,实现拖拽上传.它不依赖于其他像jquery等JS库.并且支持多方面 ...
- js拖拽上传 文件上传之拖拽上传
由于项目需要上传文件到服务器,于是便在文件上传的基础上增加了拖拽上传.拖拽上传当然属于文件上传的一部分,只不过在文件上传的基础上增加了拖拽的界面,主要在于前台的交互, 从拖拽的文件中获取文件列表然后调 ...
- Linux拖拽上传文件 lrzsz
首先安装lrzsz 命令为:yum install lrzsz 安装完毕后直接将.tar.gz格式的文件拖如xshell的窗口内就会自动上传.
- html5 拖拽上传文件时，屏蔽浏览器默认打开文件
参考: https://www.cnblogs.com/kingsm/p/9849339.html
- input文件上传（上传单个文件/多选文件/文件夹、拖拽上传、分片上传）
//上传单个/多个文件 <input title="点击选择文件" id="h5Input1" multiple="" accept= ...
- Dropzone.js实现文件拖拽上传
dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...
随机推荐
- 安全测试===CSRF攻击简介
http://www.cnblogs.com/hyddd/archive/2009/04/09/1432744.html
- SQLite3使用详解
sqlite常量的定义(SQLite3返回值的意思): SQLITE_OK = 0; 返回成功 SQLITE_ERROR = 1; SQL错误或错误的数据库 SQ ...
- 新装linux系统最基本设置
1,dns设置:vi /etc/resolv.conf 添加内容:nameserver 8.8.8.8 2,vi设置: vi ~/.bashrc 添加内容:alias vi='vim': 然后执 ...
- 解决UC手机字体变大的有关问题
解决UC手机字体变大的问题 UC手机浏览器在识别到页面文字很多的情况下会自动放大字体优化阅读体验,如果要关闭这个功能需要在网页头部添加: <meta name="wap-font-sc ...
- EF – 8.多对多关联
5.6.10 <多对多关联(上)> 时长:9分57秒 难度:难 5.6.11<多对多关联(下)> 时长:8分50秒 难度:难 如果单独地把多对多关联的CRUD拿出来讲,确实比较 ...
- wordpress技术-禁止订阅用户访问后台
begin主题虽然有个功能,但是只是少了入口,实际上测试还是可以进入后台的,那么怎么彻底解决呢?一时半会没思路,百度了下,果然有人贴出了代码. 把下面代码黏贴到主题的模板函数文件里即可: if ( i ...
- GO语言Windows下Liteide
今天用到了. 就学习一下. https://www.golangtc.com/t/56e7caf5b09ecc66b90000fe 在网上看了好多此类介绍,操作太麻烦,自己琢磨出来怎么配置了. 以Li ...
- day3 作业
文件操作用户很广泛,我们经常对文件进行操作: global log 127.0.0.1 local2 daemon maxconn log 127.0.0.1 local2 info defaults ...
- java EE ：GenericServlet 抽象类、ServletConfig 接口
ServletConfig 接口:当前 Servlet 在 web.xml 中相关配置信息 package javax.servlet; import java.util.Enumeration; p ...
- es6js promise在ie中报错“未定义”
解决办法,我使用https://cdn.bootcss.com/es6-promise/4.1.1/es6-promise.auto.min.js直接引入在html中,也可以安装相应的babel-po ...