HTML5CSS3：无插件拖拽上传图片实例源码

共11个文件

css：3个

html：3个

js：2个

html5

css3

文件上传

5星 · 超过95%的资源需积分: 32 169 浏览量 2014-07-12 09:40:53 上传评论 41 收藏 142KB RAR 举报

HTML5和CSS3是现代网页开发的两大核心技术，它们提供了许多增强用户体验的新功能。在这个"HTML5 CSS3：无插件拖拽上传图片实例源码"中，我们重点关注的是利用HTML5的拖放（Drag and Drop）API以及File API来实现图片的无插件上传功能。这种技术使得用户可以通过直接在页面上拖动文件到指定区域，实现快速、直观的文件上传，大大提升了交互体验。 HTML5的拖放API允许开发者创建可拖动元素和接受拖放的区域。在HTML中，我们可以为任何元素添加`draggable`属性，如`<img draggable="true">`，使其具有拖动能力。同时，可以使用`<div>`或其他容器元素创建一个`dropzone`，并监听`ondrop`事件，处理文件的释放操作。接下来，File API提供了一种读取和操作文件数据的方式。当用户在dropzone上释放文件时，`ondrop`事件的事件对象会包含`dataTransfer`属性，它有一个`files`数组，存储了所有被拖放的文件。我们可以通过`FileReader`对象读取这些文件，尤其是图片文件，可以使用`readAsDataURL()`方法将其转换为数据URL，然后显示在网页上或者作为上传数据的一部分发送到服务器。在CSS3方面，我们可以使用样式规则来美化这个拖放区域，例如设置边框、背景色、过渡效果等，使得拖放操作更加吸引人。此外，通过监听`dragenter`, `dragover`, 和 `dragleave`事件，我们可以动态改变dropzone的样式，比如在鼠标进入、悬停和离开时显示不同的视觉提示。在这个实例源码中，开发者可能已经实现了以下步骤： 1. 创建一个可拖放的区域，并设置适当的CSS样式。 2. 为可拖放的元素和dropzone添加事件监听器。 3. 在`ondragover`事件中阻止默认的浏览器行为，允许文件被放置在dropzone上。 4. 在`ondrop`事件中读取文件，使用FileReader将图片转换为数据URL，并显示在页面上。 5. 同时，将文件数据发送到服务器进行实际的上传操作，这通常涉及到使用XMLHttpRequest或Fetch API创建HTTP请求。 6. 可能还包括错误处理和进度指示，如上传进度条和错误提示。这个实例对于学习和理解HTML5的拖放功能和File API非常有帮助，同时也展示了如何结合CSS3来提升用户体验。通过实践这个源码，开发者可以掌握无插件图片上传的核心技术，并将其应用到自己的项目中，为用户提供更友好的交互方式。

资源推荐

资源详情

资源评论

收起资源包目录

03_upload.rar （11个子文件）

03_upload

zhy

style

main.css 2KB

upload02.html 813B

drag_drop.html 3KB

images

done.png 3KB

pic1.jpg 26KB

pic2.jpg 35KB

html5upload.js 5KB

upload.html 847B

reset.css 546B

01.css 1KB

jquery-1.8.3.js 261KB

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <style type="text/css"> #dropEle div { float: left; } </style> <script src="../../jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /** * 拖放（Drag 和 drop）是 HTML5 标准的组成部分。 * 浏览器支持 *Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。 */ $(function () { $("#dragEle")[0].ondragstart = function (event) { console.log("dragStart"); event.dataTransfer.setData("Text", event.target.id); }; /** * 当放置被拖数据时，会发生 drop 事件。 * 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开） * @param event */ $("#dropEle")[0].ondrop = function (event) { for (var p in event.dataTransfer) { console.log(p + " = " + event.dataTransfer[p] + " @@"); } console.log("onDrop"); var id = event.dataTransfer.getData("Text"); $(this).append($("#" + id).clone().text($(this).find("div").length)); event.preventDefault(); }; /** * ondragover 事件规定在何处放置被拖动的数据。 *默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。 */ $("#dropEle")[0].ondragover = function (event) { console.log("onDrop over"); event.preventDefault(); } $("#dropEle")[0].ondragenter = function (event) { console.log("onDrop enter"); } $("#dropEle")[0].ondragleave = function (event) { console.log("onDrop leave"); } $("#dropEle")[0].ondragend = function (event) { console.log("onDrop end"); } }); </script> </head> <body> <div style="border: 1px solid red ; width: 100px ; height: 100px ;text-align: center;line-height: 100px;" draggable="true" id="dragEle" > </div> <div style="width: 330px;min-height: 202px;border: 1px solid #444;margin-top: 20px;overflow-y: scroll;" id="dropEle"></div> </body> </html>

评论收藏

内容反馈