转载：提升用户体验：HTML5 拖放文件上传
http://gandli.blog.163.com/blog/static/3084958420101023274347/
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 浏览器拖放 | HTML5 Drag and drop</title>
<style>
#section{font-family: "Georgia", "微软雅黑", "华文中宋";}
.container{display:inline-block;min-height:200px;min-width:360px;color:#f30;padding:30px;border:3px solid #ddd;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}
.preview{max-width:360px;}
#files-list{position:absolute;top:0;left:500px;}
#list{width:460px;}
#list .preview{max-width:250px;}
#list p{color:#888;font-size:12px;}
#list .green{color:#09c;}
</style>
</head>
<body>
<div id="section">
<p>把你的图片拖到下面的容器内：</p>
<div id="container" class="container">
</div>
<div id ="files-list">
<p>已经拖进过来的文件：</p>
<ul id="list"></ul>
</div>
</div>
<script>
if (window.FileReader) {
var list = document.getElementById('list'),
cnt = document.getElementById('container');
// 判断是否图片
function isImage(type) {
switch (type) {
case 'image/jpeg':
case 'image/png':
case 'image/gif':
case 'image/bmp':
case 'image/jpg':
return true;
default:
return false;
}
}
// 处理拖放文件列表
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) {
var t = f.type ? f.type : 'n/a',
reader = new FileReader(),
looks = function (f, img) {
list.innerHTML += '<li><strong>' + f.name + '</strong> (' + t +
') - ' + f.size + ' bytes<p>' + img + '</p></li>';
cnt.innerHTML = img;
},
isImg = isImage(t),
img;
// 处理得到的图片
if (isImg) {
reader.onload = (function (theFile) {
return function (e) {
img = '<img class="preview" src="' + e.target.result + '" title="' + theFile.name + '"/>';
looks(theFile, img);
};
})(f)
reader.readAsDataURL(f);
} else {
img = '"o((>ω< ))o"，你传进来的不是图片！！';
looks(f, img);
}
}
}
// 处理插入拖出效果
function handleDragEnter(evt){ this.setAttribute('style', 'border-style:dashed;'); }
function handleDragLeave(evt){ this.setAttribute('style', ''); }
// 处理文件拖入事件，防止浏览器默认事件带来的重定向
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
}
cnt.addEventListener('dragenter', handleDragEnter, false);
cnt.addEventListener('dragover', handleDragOver, false);
cnt.addEventListener('drop', handleFileSelect, false);
cnt.addEventListener('dragleave', handleDragLeave, false);
} else {
document.getElementById('section').innerHTML = '你的浏览器不支持啊，同学';
}
</script>
</body>
</html>
分享到：
相关推荐
html5图片拖放
Droparea 是一个使用 HTML5 实现的图片拖放上传的 jQuery 插件。
仿云盘图片拖放上传,DragUpload,包含所有代码以及DOME
上次我们介绍过一款基于HTML5的图片马赛克效果，今天我们要来介绍一款基于jQuery的图片裁剪插件，这款jQuery图片裁剪插件可以选择裁剪框的尺寸比例，可以设置高宽尺寸，同时可以设置图片翻转角度，当然也支持图片的...
拖放上传组件。 安装 $ component install component/dropload 活动 upload （上传）一个文件被丢弃 text （字符串）字符串表示 url (string) url 表示 html (string) html 表示 drop （事件）执行了丢弃 例子 var...
jQuery File Upload 是一个 jQuery 图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。 1、多文件上传： 允许一次选择多个文件...
内置强大的Ajax上传，包括HTML4和HTML5上传支持(多文件上传、真实上传进度及文件拖放上传)，剪切板上传及远程抓取上传，追求完美的用户上传体验。 Word完美支持 实现Word代码自动检测并清理，提供高效完美的Word...
点评：该功能解决了我们实际中遇到的一些问题，比如iframe模拟异步图片上传时，就必须将图片写到form外。 formaction formmethod 该属性用于按钮（submit）让表单提交页面可又按钮控制 formmethod指定各按钮...
用于ReactHTML5拖放上传组件 一个简单的React组件，用于“拖放到上传”功能。 删除的文件将作为 ， ArrayBuffer和数据URI返回。 它支持Internet Explorer 10及更高版本，以及所有主要的桌面浏览器。 您还可以在以下...
本篇文章主要介绍了HTML5+CSS3实现无插件拖拽上传图片（支持预览与批量），现在html5提供了API以及File，FileReader，XMLHttpRequest等强大的API，为我们拖放实现上传提供了可能。有兴趣的可以了解一下。
参考文章：JS HTML5拖拽上传图片预览 HTML5拖拽移动列表实现思路： 1.循环设置每个子项的draggable属性，以及设置拖动标记（不会多个或全部子项都移动） 2.每次进入投放区，则检测时候有拖放标记，有则添加dom...
本文实例讲述了javascript实现移动端 HTML5 图片上传预览和压缩功能。分享给大家供大家参考，具体如下： 在开发移动端web网页中，我们不可避免的会遇到文件上传的功能，但由于手机图片尺寸太大，上传时间过长导致...
特征： 多次上传块上传并行上传内部队列管理器完全自定义界面拖放上传图片预览事件、回调和 API 可扩展带有 fastes Javascript Class 代码的面向对象代码支持的浏览器： 火狐 17+ Chrome 10+ Safari 7+ 浏览器 10+ ...
TinyTransfer是一个在线文件共享工具，可经过Spectre运用PHP，HTML5，CSS3和jQuery...上传图片的图片预览 易于定制 易于运用 反响灵活 管理面板 无需数据库 洁净的编码并有据可查 PHP和HTML5和jQuery和CSS3..
内置强大的Ajax上传，包括HTML4和HTML5上传支持(多文件上传、真实上传进度及文件拖放上传)，剪切板上传及远程抓取上传，追求完美的用户上传体验。 Word完美支持 实现Word代码自动检测并清理，提供高效完美的Word代码...
可拖动换位的照片墙，采用html,css,js编写，实现拖动换位效果
Droploader - CKEditor 的图片上传插件该插件允许使用标准文件上传后端通过拖放到编辑器窗口来上传一张或多张图像。 此功能将与 CKEditor 4.5 捆绑在一起，该插件首次发布时处于测试阶段。 然而，新的捆绑插件使用了...
内置强大的Ajax上传，包括HTML4和HTML5上传支持(多文件上传、真实上传进度及文件拖放上传)，追求完美的用户上传体验。 Word完美支持 实现Word代码自动检测并清理，提供高效完美的Word代码过滤方案，生成代码最优化...
重量轻的JavaScript库，将HTML元素设置为一个降落区,并通过Ajax文件被上传到服务器。