js拖拽图片到浏览器

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><style>div {width: 700px;height: 300px;border: 2px dashed black;overflow: hidden;}</style>
</head>
<body>
<h1>将图片拖拽到此</h1>
<div id="fileZone" ondrop="drop(event)"><span><img/></span>
</div>
</body>
</html>
<script>var ipt = document.getElementById("fileZone");ipt.ondragover = function () {return false; //当元素移动至此  关闭默认处理}//添加拖拽事件function drop(e) {e.stopPropagation();e.preventDefault();e == e || window.event;//判断是浏览器图片还是电脑图片var files = e.dataTransfer.files;//获取拖拽的所有的文件for (var i = 0; i < files.length; i++) {var file = files[i];//获取每个文件if (file.type.indexOf("image") != -1) {//判断是否是图片var reader = new FileReader();//创建文件读取对象//读完回调事件reader.onload = function (f) {var sp = document.createElement("span");sp.innerHTML += '<img style="padding: 0px 10px;" width="200px"  src="' + this.result + '" alt="' + f.name + '"/>';ipt.insertBefore(sp, null);//ipt内部追加sp}reader.readAsDataURL(file);//把图片读成Base64编码字符串}}}
</script>

js拖拽图片到浏览器相关推荐

js拖拽图片到浏览器上传
拖拽的事件有很多,这个懂的都懂不懂的就- <!doctype html> <html> <head> <meta charset="utf-8&qu ...
html5拖拽图片批量ajax无刷新进度上传
1.前端拖拽图片之前有篇文章说到HTML5的拖拽(drag.drop,详见:/post/jquery-plugin-1-jquery-drag-and-html5-draggable-api-and ...
html列表拖拽排序插件,JS拖拽排序插件Sortable.js用法实例分析
本文实例讲述了JS拖拽排序插件Sortable.js用法.分享给大家供大家参考,具体如下: 最近由于项目功能设计的原因,需要对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好 ...
使用js拖拽盒子移动（）
使用js拖拽盒子移动所用到的方法有onmousemove , onmouseup , onmousedown 按下鼠标开始拖拽,松下及停止此方法用函数实现 <!DOCTYPE html> ...
js拖拽360桌面悬浮球代码
js拖拽360桌面悬浮球代码原生js制作简单好用的360桌面悬浮球,可拖拽到浏览器边缘,自动贴边,自动适应屏幕效果. 演示地址下载地址
React.js实现原生js拖拽效果及思考
一.起因&思路不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
【组件】前端js拖拽插件 VUE
[组件]前端js拖拽插件 VUE Vue Draggable - Vue 拖拽组件王者 Vue drag resize - 轻量级,无依赖,可缩放 Vue smooth dnd - 简单动效,上下拖拽 ...
js拖拽库——Sortable.js
Sortable.js是一款优秀的js拖拽库,支持ie9及以上版本ie浏览器和现代浏览器,也可以运行在移动触摸设备中.不依赖jQuery.支持 Meteor.AngularJS.React.Vue.K ...
html 上传图片，拖拽图片，并在页面显示
spring boot 项目,实现了点击按钮上传文件,以及拖拽文件上传,限制上传文件的类型,上传文件后再页面展示文件,并且显示文件源大小,源分辨率,文件名称,点击展示的图片,放大显示默认效果图: 上 ...

js拖拽图片到浏览器

js拖拽图片到浏览器相关推荐

最新文章

热门文章