`

仿QQ灵活拖拉文件上传

阅读更多

在html5中,出现了众多的新的技术和特性,而本文将介绍的是目前HTML5标准中,对如何将用户客户端的文件拖拉到浏览器这一特性进行初步的讲解。在HTML5中的标准中,提到了希望能在新一代浏览器中,支持用户直接将客户端桌面的文件拖放到浏览器中,甚至鼓励做更多的工作(比如上传文件)。这篇文章将分如下几个方面进行初步的分析和探讨:

  如何将文件拖放到web页面中

  在Javascript中分析拖拽文件

  在客户端装载和解析文件

  使用 XMLHttpRequest2异步上传文件到服务端

  上传时显示一个进度条

  改进上传文件的表单,甚至支持IE 6,以让在各浏览器中可以兼容运行。

  并介绍如何单单只用Javascript实现,不用任何框架。

  目前浏览器对文件拖拉的支持

  在我们开始讲解前,我们先要说明下,由于HTML5的标准最终版本还没完全发布,各浏览器也不是完全都对所有功能进行支持,所以本文的程序有可能在今后的各浏览器中不能完全运行成功,但至少在本文发表时,会对以下浏览器在如下各方面进行支持。

  1) 目前程序能在所有的Firefox和Chrome的浏览器中很好的运行。

  2) Opera浏览器能解通过Javascript去解析文件,但不支持文件的拖拉到浏览器中及使用XMLHttpRequest2去上传文件。

  3) IE和Safari不支持任何本文提到的API和新特性。

  4) Apple不允许在iOS系统中使用HTML表单上传文件。

  下面,就让我们开始学习之旅吧。

  HTML和CSS

  我们先来看下上传文件的表单,代码如下:

<Form id="upload" action="upload.php" method="POST" enctype="multipart/form-data">

<fieldset>

<legend>HTML File Upload</legend>

<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />

<div>

<label for="fileselect">Files to upload:</label>

<input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />

<div id="filedrag">or drop files here</div>

</div>

<div id="submitbutton">

<button type="submit">Upload Files</button>

</div>

</fieldset>

</form>

<div id="messages">

<p>Status Messages</p>

</div>

  可以看到,在这个表单中,放置了一个文件选择框,唯一跟HTML4不同的时,这个框采

  用的是HTML5中的一个新增的文件上传框属性multiple,允许选择多个不同的文件。此外,

  在id为 filedrag的div中,这个区域是用来将文件拖拉放置的区域,下文中会用到。

  接下来会看下CSS,代码如下:

#filedrag    {

 display: none;

 font-weight: bold;

 text-align: center;

 padding: 1em 0;

 margin: 1em 0;

 color: #555;

 border: 2px dashed #555;

 border-radius: 7px;

 cursor: default;

}

  #filedrag.hover    {

 color: #f00;

 border-color: #f00;

 border-style: solid;

 box-shadow: inset 0 3px 4px #888;

}

  在这段CSS中,设置了当文件拖放到页面的指定区域时的样式,这个样式是当文件被拖动

  到指定区域时,才起到作用的,是通过Javascript击发其起作用的,下文会提到。

  HTML5中的文件API

  在HTML5中,对文件的API有如下几点的新的改进,其标准可以参考

  (http://www.w3.org/TR/file-upload/)。

  FileList: 表示已选择的文件,以数组的形式表示。

  File: 代表一个单独的文件

  FileReader: FileReader是一个接口,它允许我们在客户端读取文件的数据,并且可以在Javascript中去使用。

  开始动手写Javascript

  下面,我们开始动手编写Javascript,首先我们编写一些工具javascript,比如:

// getElementById

function $id(id) {

return document.getElementById(id);

}

//

// 输出信息

function Output(msg) {

var m = $id("messages");

m.innerHTML = msg + m.innerHTML;

}接者,我们编写init方法,去判断文件API的可用性,代码如下: // 判断当前浏览器中文件API是否可用

if (window.File && window.FileList && window.FileReader) {

Init();

}

//

// 初始化程序

function Init() {

var fileselect = $id("fileselect"),

filedrag = $id("filedrag"),

submitbutton = $id("submitbutton");

// 添加文件选择的事件监听

fileselect.addEventListener("change", FileSelectHandler, false);

// 判断xmlhttprequest 2是否可用

var xhr = new XMLHttpRequest();

if (xhr.upload) {

// file drop

filedrag.addEventListener("dragover", FileDragHover, false);

filedrag.addEventListener("dragleave", FileDragHover, false);

filedrag.addEventListener("drop", FileSelectHandler, false);

filedrag.style.display = "block";

// remove submit button

submitbutton.style.display = "none";

}

}

分享到:
评论

相关推荐

    仿QQ相册多图片上传控件

    Web仿QQ相册图片上传控件 ,带预览的 ,支持单个图片进度条

    仿QQ的文件管理Demo

    本项目"仿QQ的文件管理Demo"旨在模拟腾讯QQ应用中的文件管理功能,为开发者提供一个参考实例,以学习如何在Android平台上实现类似的应用。 在Android开发中,文件管理涉及到以下几个关键知识点: 1. **文件系统**...

    VC 网络聊天 仿QQ 可发送文件 DLL版源码.rar

    VC NETchar网络聊天 仿QQ 可发送文件 DLL版源码,是上一个网络聊天程序的又一个版本,使用了DLL的版本,上一个版本可以这里下载:VC 6.0 NetChat 网络聊天源码  这个聊天程序中将常用的一些聊天模块封装在ChatSock....

    简单的仿QQ界面源码聊天与上传文件

    该资源是一个简单的仿QQ界面的源码实现,用于学习和实践聊天应用的开发。这个项目包含服务器端和客户端两部分,旨在帮助开发者了解如何构建一个基础的即时通讯系统,同时支持文本聊天和文件上传功能。以下是对这个...

    使用java实现的仿QQ登陆以及文件传输项目

    该项目是使用Java编程语言实现的一个仿QQ登录及文件传输系统,它主要涵盖了以下几个核心知识点: 1. **网络通信基础**:此项目涉及到网络通信的基本原理,包括TCP(传输控制协议)和UDP(用户数据报协议)。TCP是一...

    易语言仿QQ窗口

    在本项目中,"易语言仿QQ窗口"是指利用易语言编写的一个应用程序,该程序模仿了腾讯QQ的用户界面和某些功能。下面将详细讨论相关知识点。 1. **易语言**:易语言是一种具有图形化编程界面的编程工具,它使用汉字...

    仿QQ音乐播放器文件List控件

    "仿QQ音乐播放器文件List控件"是一个典型的UI组件,它涉及到编程、UI设计和用户体验等多个方面。在这个主题中,我们将深入探讨如何创建这样一个控件,以及它所涉及的关键技术和知识点。 首先,"List控件"是一种常见...

    高仿QQ局域网聊天文件传输工具 源代码

    该源代码项目是一个实现高仿QQ界面的局域网聊天工具,主要涵盖了以下几个核心知识点: 1. **高仿QQ界面**:此项目的目标是模仿QQ的用户界面设计,包括按钮、对话框、好友列表等元素的布局和样式,提供相似的用户...

    仿QQ框架VC代码

    【标题】:“仿QQ框架VC代码”是一个基于Visual C++(VC)的编程项目,旨在模仿QQ即时通讯软件的基本架构。这个项目的核心是构建一个类似的用户界面和基础框架,为后续开发自己的通信功能提供起点。 【描述】:描述...

    仿qq相册批量上传照片功能

    这个项目"仿qq相册批量上传照片功能"旨在复刻这一特性,为用户提供类似的体验。 批量上传图片的功能实现通常涉及到以下几个关键知识点: 1. **文件选择**:用户需要有选择多张图片的能力。这通常通过HTML5的`...

    仿QQ相册图片上传

    本项目名为"仿QQ相册图片上传",其目标是高度模拟腾讯QQ空间的图片上传体验,包括批量上传和图片旋转等实用特性。这个功能的实现主要依赖于Flash技术,这在早期网络应用中是非常普遍的,因为Flash提供了跨平台的...

    MYQQ.rar_MYQQ_仿QQ_聊天 文件传输

    【标题】"MYQQ.rar_MYQQ_仿QQ_聊天 文件传输"揭示了这是一个模仿QQ即时通讯软件的项目,其中包含了实现聊天和文件传输功能的源代码。MYQQ可能是一个独立开发的程序,旨在提供与QQ类似的功能,允许用户进行在线交流和...

    winform高仿qq登陆界面

    8. `QQ2013.sln`:解决方案文件,包含了项目和解决方案的信息,允许在Visual Studio中打开和管理项目。 9. `QQ2013.suo`:用户特定的解决方案选项文件,不包含在版本控制系统中,用于保存用户的个人设置。 10. `51...

    世上最高仿QQ2012的局域网聊天程序-完美好友列表(绝对经典)

    项目名称:CC2012(经典仿QQ实例源码) 下载文件内容: word格式说明书, CC2012-C#源码, MYCC数据库与查询文件脚本 源码实现功能: 1.仿QQ的CC登录界面采用网络美女恩典作为主题类型,界面更好看又养眼,界面相似度...

    仿QQ vc界面

    【标题】"仿QQ vc界面"揭示了这个项目的核心内容,即使用Visual C++(简称vc)来构建一个类似于腾讯QQ的用户界面。这是一项针对软件界面设计与实现的挑战,旨在模仿QQ的经典外观和交互体验,使得用户在使用这款应用...

    仿QQ上传多张图片和评论的例子

    综上所述,"仿QQ上传多张图片和评论的例子"涵盖了前端开发中的诸多关键技术,包括文件操作、用户交互、UI设计、服务器通信等多个方面。通过这个项目,开发者可以深入理解并实践这些技术,提升自己的技能水平。

    自己瞎写的仿QQ程序

    开发者需要实现文件上传、下载和传输的逻辑,可能需要考虑文件大小、速度限制等因素。 6. **状态与表情**:QQ有多种在线状态(如在线、离线、忙碌等)和丰富的表情包。开发者需要设计状态管理以及表情库,可能涉及...

    用SSH+ajax实现的上传进度条,仿qq邮箱的大文件上传窗体

    这种方案不仅能够实时展示文件上传进度,还能够模拟出类似QQ邮箱等知名平台的大文件上传窗体功能,极大地提升了用户体验。 #### 二、关键技术点分析 **1. SSH框架简介** - **Struts**:用于构建MVC架构的Web应用...

    Android 头像上传仿qq

    在Android应用开发中,"Android 头像上传仿qq"是一个常见的需求,特别是在构建个人中心模块时。这个项目主要是为了实现用户能够选择头像并上传到服务器,类似于QQ应用中的头像设置功能。以下是一些关于这个主题的...

    仿QQ聊天系统(java swing)

    【标题】"仿QQ聊天系统(java swing)"是一个基于Java Swing开发的桌面应用程序,它模仿了QQ的基本功能,提供了用户间的实时通讯服务。Swing是Java标准版(J2SE)的一部分,用于构建图形用户界面(GUI)的库,具有...

Global site tag (gtag.js) - Google Analytics