帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» h5图片拖拽上传
h5图片拖拽上传
浏览:826次
-
评论:0次
-
发布时间:2017-03-13
Html
Css
Js
将附件拖拽到此区域
#drop_area { border:2px dashed #BBB; padding:25px 5px; text-align:center; font-size:20pt; color:#BBB; border-radius:5px; } #drop_area.hovering { -webkit-box-shadow:inset 0px 0px 50px #BBB; -moz-box-shadow:inset 0px 0px 50px #BBB; -o-box-shadow:inset 0px 0px 50px #BBB; box-shadow:inset 0px 0px 50px #BBB; } .example { margin:40px 25px; padding:10px; border:1px solid #BBB; } #preview { text-align:left; } #preview li { margin:10px 0; }
$(function() { var fd = new FormData(); var FileIndex = 0; var output = document.getElementById('preview'); var dropZone = document.getElementById('drop_area'); //首先对页面事件做一个判断处理,如果页面中存在并满足下列if条件就触发事件方法。 if ((('draggable' in dropZone) && ('ondragenter' in dropZone) && ('ondragleave' in dropZone) && ('ondragover' in dropZone) && window.File && window.FileList && window.FileReader)) { //文件进入事件 function handleFileDragEnter(e) { //不再派发事件 e.stopPropagation(); //取消事件的默认动作 e.preventDefault(); //为当前元素添加CSS样式(这里使用到的样式均会在下面展示出来) this.classList.add('hovering'); } //文件离开事件 function handleFileDragLeave(e) { e.stopPropagation(); e.preventDefault(); //为当前元素移除CSS样式 this.classList.remove('hovering'); } //文件拖拽完成效果 function handleFileDragOver(e) { e.stopPropagation(); e.preventDefault(); //把拖动的元素复制到放置目标(注1会给出dropEffect详细属性)。 e.dataTransfer.dropEffect = 'copy'; } //文件拖拽到页面后处理方式 function handleFileDrop(e) { e.stopPropagation(); e.preventDefault(); //为当前元素移除CSS样式 this.classList.remove('hovering'); //target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。 var files = e.target.files || e.dataTransfer.files; for (var i = 0, f; f = files[i]; i++) { FileIndex++; //FormData提供的append方法把数据写入到fd中 fd.append("FileData_" + FileIndex, files[i]); } var files = e.dataTransfer.files; //根据files[]获得的数据,在前台页面写出上传的文件基本信息 var outputStr = []; for (var i = 0, f; f = files[i]; i++) { var lastModified = f.lastModifiedDate; var lastModifiedStr = lastModified ? lastModified.toLocaleDateString() + ' ' + lastModified.toLocaleTimeString() : 'n/a'; outputStr += '
' + f.name + '
'; } output.innerHTML = '
' + outputStr + '
'; } //为四种方法生成addEventListener事件监听器,addEventListener有三个参数:第一个参数表示事件名称;第二个参数表示要接收事件处理的函数;第三个参数为 useCapture(一般来说为false,true会更改响应顺序), dropZone.addEventListener('dragenter', handleFileDragEnter, false); dropZone.addEventListener('dragleave', handleFileDragLeave, false); dropZone.addEventListener('dragover', handleFileDragOver, false); dropZone.addEventListener('drop', handleFileDrop, false); } });
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>h5图片拖拽上传-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:h5图片拖拽上传
简单实现图片轮播
angualrjs跨域请求百度接口
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
826
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值