转载：提升用户体验：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图片拖放功能是现代Web开发中的一个重要特性，它允许用户通过鼠标或触摸设备将图像从一个位置拖放到另一个位置，甚至可以在不同的浏览器窗口或应用程序之间进行操作。这一功能的实现基于HTML5的Drag and Drop ...
HTML5文件拖放功能还支持文件预览，可以通过`FileReader` API读取文件内容并显示为图片或其他格式。同时，我们还可以限制拖放的文件类型，例如只允许上传图片或特定格式的文档。 总之，HTML5文件拖放是一项强大的...
Droparea 是一个使用 HTML5 实现的图片拖放上传的 jQuery 插件。
在IT行业中，实现类似云盘的图片拖放上传功能是一项常见的需求，这为用户提供了便捷的交互体验。本文将详细讲解如何使用JavaScript（JS）、jQuery（JQ）和AJAX技术来实现这一功能。 首先，我们需要理解拖放上传的...
在现代Web应用中，用户交互性是提升用户体验的关键因素之一，拖放上传图片功能就是这样的一个例子。这个功能允许用户通过简单的拖放操作将图片文件从本地文件系统上传到网站，提高了上传的便利性和直观性。本文将...
在给定的"Js图片裁切、图片拖放和缩放实例.rar"中，我们可以深入探讨三个关键的JavaScript技术：图片裁切、图片拖放和图片缩放。 1. 图片裁切： 图片裁切是网页应用中常见的功能，通常用于上传头像或者预览图片。这...
通过这个压缩包，我们可以学习到如何使用JavaScript处理HTML5的拖放API来创建一个图片拖放展示区。 首先，我们要了解HTML5的拖放API。这个API允许开发者创建可拖动元素，并定义拖放行为。主要包括以下事件： 1. `...
1. **拖放上传**：允许用户直接从资源管理器拖放文件到指定区域进行上传。 2. **浏览上传**：通过点击“浏览文件”按钮，打开文件选择对话框，选择文件上传。 3. **多选上传**：支持同时拖放或浏览选取多个文件上传...
综上所述，Bootstrap图片拖拽上传是结合现代Web技术实现的一种用户友好的文件上传方式，它利用Bootstrap的样式和HTML5的拖放功能，为用户提供流畅的交互体验。通过学习和实践这一功能，开发者可以提升其前端技能，为...
Vue2组件可以监听`dragenter`、`dragover`、`dragleave`和`drop`等事件，从而实现图片的拖放上传。需要注意的是，由于安全原因，直接拖放文件到浏览器时，需要通过`event.dataTransfer.files`来获取文件。 4. **...
Uploadify的H5版本uploadifive则是针对HTML5的优化，支持拖放上传、文件预览等特性，尤其适合手机和移动设备的用户体验。 uploadifive的工作原理主要包括以下步骤： 1. 用户在前端选择或拖放图片。 2. 使用HTML5的...
在这个"HTML5 CSS3：无插件拖拽上传图片实例源码"中，我们重点关注的是利用HTML5的拖放（Drag and Drop）API以及File API来实现图片的无插件上传功能。这种技术使得用户可以通过直接在页面上拖动文件到指定区域，...
实现标签拖放需要用到与图片拖放类似的事件处理，但可能需要额外处理元素的堆叠顺序和边界检测。 4. **Mui框架集成** Mui是一个轻量级的前端框架，特别适合移动H5应用开发。集成HTML5拖放功能，可以让Mui应用的...
5. **拖放功能**：HTML5还支持文件拖放操作，通过监听`dragenter`、`dragover`和`drop`事件，可以实现用户直接从桌面拖放图片到网页上进行上传预览。 6. **FormData对象**：当用户选择好图片并预览后，实际的文件...
在这个“html5实现多图片上传预览（源码，已测试）”的项目中，我们主要关注的是HTML5的新特性——File API和拖放API，它们允许我们在不借助服务器端处理的情况下实现本地文件的读取和预览。 首先，File API是HTML5...
HTML5图片上传功能是现代网页应用中的一个重要特性，它提供了对拖放操作的支持，使得用户可以方便地将本地图片直接拖放到网页上进行上传。批量图片上传插件则进一步优化了这一过程，允许用户一次性上传多张图片，...
接下来，我们讨论图片拖放功能。HTML5的拖放API使得在网页上实现拖放操作变得简单。用户可以将图片元素设置为可拖动，并监听dragstart、dragover和drop事件来处理拖放过程。 ```html <div id="dropzone"></div> ...
File API提供了`<input type="file">`元素，通过改变其属性，可以支持多文件选择和拖放上传。 2. **图片预览**：在用户选择图片后，JavaScript可以利用File API创建一个`FileReader`对象，调用其`readAsDataURL()`...