html5 拖拽 - 佐笾已逝 - ITeye博客

`

wjlgryx

浏览: 310285 次
性别:
来自: 北京

最近访客更多访客>>

Helkern

Helenhhj

cao510453

1729051657

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

开发小菜：支持IE9以下的吗？
HTML5+CSS3+JQuery打造自定义视频播放器
攻城使：开发Html5必须得下载么，我用dw编写，把文件复制到myec ...
html5开发 myeclipse安装aptana插件
疾风鹰狼： ...
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
sardodo：你好，我想问下，导入例子中的.dae格式模型是可以看到旋转的小 ...
c3dl 初步认识
BIOHAZARDX：下载学习，初学者膜拜一下。
html5 实现动画（三）

html5 拖拽

博客分类：

Html5 文章

HTML5 浏览器 CSS

阅读更多

HTML5拖拽文件以及显示文件
利用支持HTML5（具体是拖拽API和File API）的浏览器拖拽图片/音频文件到浏览器窗口指定区域来看到预览（还未上传），需要了解的知识主要是拖拽API，和通过拖拽事件获得File之后，对File进行相关信息读取。在HTML5出现之前读取文件信息操作往往是通过后台来实现，现在浏览器也具有了这样的能力，就能提供更好的用户体验。需要的知识大概如下：

(拖拽事件 API) 拖放文件到页面上的指定区域，drop事件发生
(拖拽事件 API) 从drop事件取得DataTransfer对象
(File API) 调用DataTransfer对象的files属性，得到FileList，它代表了拖放文件的列表。
(File API) 遍历FileList，得到每一个单独的File对象。
(File API) 通过FileReader对象来读取每一个File对象的内容（FileReader.readAsDataURL(file)）。然后一个新的data URI格式对象被创建，然后剩下的就交给onloadend回调函数来处理。
(File API) 现在我们通过对拖拽文件的处理得到了一个“data URL”，比如显示图片和MP3播放器。或者可以通过读取text来获得拖拽css文件的文本内容。

分享到：

O3D程序基本结构 | GOOGLE FONT API使用教程

2011-03-29 12:04
浏览 1153
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

html5 拖拽交换: 在"html5 拖拽交换"这个主题中，我们将深入探讨HTML5拖放API的基本概念、实现方式以及如何实现元素间的交换。 1. **HTML5拖放API**：HTML5的拖放API提供了一套事件和接口，使得开发者能够创建拖放功能的网页应用。...

html5拖拽上传.: ### HTML5 拖拽上传实现详解 #### 一、引言随着HTML5的普及与浏览器技术的进步，用户界面的交互方式变得越来越多样化。其中，“拖拽上传”功能就是一个非常实用且广受欢迎的例子。从Gmail的附件拖拽上传到网易...

基于HTML5 拖拽接口(Drag and drag-and-drop interfaces based on HTML5: HTML5是现代网页开发的重要标准，它引入了许多新特性，其中拖放（Drag and Drop）功能就是一项增强用户交互体验的重要接口。拖放接口允许用户通过鼠标或触控设备将元素从一个位置拖动到另一个位置，使得网页的互动性...

html5拖拽上传文件: HTML5拖拽上传文件是现代Web开发中的一个显著特性，它极大地提升了用户在网页上的交互体验。这个功能允许用户直接从他们的计算机上通过鼠标拖放操作将文件上传到网站，而无需传统意义上的“浏览文件”按钮。这项技术...

HTML5拖拽互动修改页面元素颜色特效: 这款“HTML5拖拽互动修改页面元素颜色特效”充分利用了这一特性，为用户提供了直观且有趣的交互体验。拖放API是HTML5中的一个重要组成部分，允许用户通过鼠标操作将一个元素从一处拖到另一处。在这个特效中，颜色...

HTML5拖拽效果源码下载: HTML5拖拽，draggable='true',目前只有Firefox、Google、Safari支持。

html5拖拽列表.zip: 这个“html5拖拽列表.zip”压缩包包含了一些示例文件，让我们一起探讨HTML5拖放功能以及如何创建一个可拖动列表。在HTML5中，拖放功能使得用户可以方便地通过鼠标或触摸设备将元素从一处拖到另一处，这大大增强了...

html5拖拽图片调整截图代码.zip: HTML5的拖拽功能是其增强用户体验的重要特性之一，它允许用户通过鼠标或触摸设备轻松地在网页上拖动元素。在这个"html5拖拽图片调整截图代码.zip"压缩包中，包含的代码示例正是利用了这一特性，提供了一个图片编辑的...

5.html5拖拽异步上传文件.zip: 在“5.html5拖拽异步上传文件.zip”中，我们主要探讨如何利用这些特性来实现用户友好的文件上传体验。拖放功能是HTML5提供的一种用户交互方式，允许用户通过鼠标直接从桌面或浏览器内部拖动元素到指定区域。在文件...

HTML5拖拽上传图片预览提交代码.zip: HTML5的拖拽上传图片预览提交功能是现代网页开发中的一个实用特性，它结合了JavaScript、CSS3和HTML5的新技术，为用户提供了一种直观且友好的交互体验。在这个"HTML5拖拽上传图片预览提交代码.zip"中，包含的可能是...

jQuery+html5拖拽上传图片预览代码.zip: 《jQuery+HTML5拖拽上传图片预览技术详解》在现代网页开发中，用户交互体验的提升成为了不可或缺的一部分，而拖拽上传功能正是这种体验的体现之一。本篇文章将详细解析一个基于jQuery和HTML5的图片拖拽上传并预览...

html5拖拽排序多图片上传插件特效源码.zip: 在本资源“html5拖拽排序多图片上传插件特效源码.zip”中，我们可以找到一个利用HTML5的新特性实现的交互式图片上传和排序功能。下面将详细解释相关知识点。 1. **HTML5拖放(Drag and Drop) API**： HTML5的拖放...

HTML5 拖拽效果: HTML5是现代网页开发的重要标准，它引入了许多新特性，其中拖拽效果是提升用户体验的一个显著功能。在本文中，我们将深入探讨如何利用HTML5实现拖放（Drag and Drop）功能，以及如何通过CSS3来增强视觉效果。一、...

jsPlumb开发入门教程(实现html5拖拽连线)借鉴.pdf: 在本文中，我们将深入探讨如何使用jsPlumb实现HTML5拖拽连线的功能。首先，确保你的项目环境兼容jsPlumb。jsPlumb支持IE6及以上版本以及现代浏览器，但存在一些特定浏览器的兼容性问题，例如IE9的jQuery 1.6.x和...

jsPlumb开发入门教程(实现html5拖拽连线).pdf: jsPlumb 开发入门教程（实现 html5 拖拽连线） jsPlumb 是一个强大的 JavaScript 连线库，可以将 html 中的元素用箭头、曲线、直线等连接起来，适用于开发 Web 上的图表、建模工具等。它同时支持 jQuery+jQuery UI...

"HTML5拖拽"示例: The drag and drop sample contains four code examples to show how the draggable attribute helps you create fully drag and drop enabled web applications.

html5 拖拽上传图片实例演示: HTML5 拖拽上传图片是一种用户友好的交互方式，允许用户通过拖放操作将本地图片上传至服务器。这一功能的实现主要依赖于HTML5的File API和Drag and Drop API。下面我们将详细讨论这两个API以及如何结合JavaScript...

HTML5.zip_html5 拖拽_拖拽上传: 在HTML5中，拖拽API（Drag and Drop API）是一个显著的特性，它使得用户可以通过简单的拖放操作在网页上进行交互，比如文件上传。拖拽上传是一种在网页上实现文件上传的独特方式，它允许用户直接从本地文件系统...

Global site tag (gtag.js) - Google Analytics