基于aspnet的多文件上传预览和在线编辑功能的实现.docx

基于aspnet的多文件上传预览和在线编辑功能的实现.docx

《基于aspnet的多文件上传预览和在线编辑功能的实现.docx》由会员分享，可在线阅读，更多相关《基于aspnet的多文件上传预览和在线编辑功能的实现.docx（28页珍藏版）》请在冰点文库上搜索。

基于aspnet的多文件上传预览和在线编辑功能的实现

昌吉学院论文（设计）分类号：

本科毕业论文（设计）密级：

基于的多文件上传、预览

和在线编辑功能的实现

系院计算机工程系

学科门类工学

专业计算机科学与技术

学号0825829016

姓名郭倩

指导教师高琳

教师职称副教授

年月日

毕业论文原创性声明

本人郑重声明：

所呈交的论文是本人在导师的指导下独立进行研究所取得的研究成果。

除了文中特别加以标注引用的内容外，本论文不包含任何其他个人或集体已经发表或撰写的成果或作品。

本人完全意识到本声明的法律后果由本人承担。

作者签名：

年月日

毕业论文版权使用授权书

本毕业论文作者完全了解学院有关保存、使用毕业论文的规定，同意学院保留并向有关毕业论文管理部门或机构送交论文的复印件和电子版，允许论文被查阅和借阅。

本人授权本学院及以上级别优秀毕业毕业论文评选机构将本毕业论文的全部或部分内容编入有关数据库以资检索，可以采用复印、缩印或扫描等复制手段保存和汇编本毕业论文。

声明人签名：

导师签名：

年月日年月日

摘要

随着现代网络技术逐渐深入人们的工作、生活，人们对网上办公、在线存储等功能的需求也越来越强烈，基于的多文件上传、预览和在线编辑功能的实现就为人们减轻了工作负担。

此功能的操作非常简单，功能实用，能够实现多文件同时上传、在线预览到已上传文件的内容以及实现在线编辑文档文件的功能，当用户发现上传文件中有小错误时不需要删除原文件并重新上传，只需要对已上传文件进行在线编辑保存即可，省去了用户反复上传和删除操作的麻烦，为人们的办公及生活提供了方便快捷的文件存储、查看和编辑功能。

本文详细论述了基于的多文件上传、预览和在线编辑功能的实现过程。

系统用ASP.NET作为开发平台，C#作为编程语言，SQLServer2005作为数据库管理系统，实现了多文件上传、文件在线预览、文件在线编辑的功能。

论文组织如下：

首先阐述了该功能的设计背景、意义；其次介绍了相关的开发工具及技术基础；接着对功能的需求进行了分析，并提出了具体的设计方案和数据库模型；然后展现了系统各功能模块的实现；最后对该功能进行了严格的测试。

关键词：

文件上传；预览；在线编辑；详细设计；功能模块；

Abasedmultiplefileupload,previewandeditfunctionrealization

Abstract

Alongwiththedevelopmentofmodernnetworktechnologygraduallyintopeople'swork,life,peopleontheofficeonline,onlinestorageandotherfunctionsofthedemandismoreandmoreintense,basedmultiplefileupload,previewandeditfunctionshavebeenreducedworkingburden.Thisfeatureoftheoperationisverysimple,functionalandpractical,canrealizetheuploadmultiplefilesatthesametime,theonlinepreviewtotheuploadedfilecontentandtherealizationofonlineeditingdocumentfiles,whenusersfinduploadfilehassmallerrorsdonotneedtodeletetheoriginalfileanduploadagain,onlytobeuploadedfileonlineeditingcanbesaved,eliminatingtheneedfortheusertouploadanddeleteoperationrepeatedtrouble,forpeople'sworkandthelifeprovidesaconvenientandefficientfilestorage,viewandeditfunction.

Thispaperdiscussesindetailthebasedmultiplefileupload,previewandeditfunctionrealizationprocess.ThesystemusesASP.NETasthedevelopmentplatform,C#asaprogramminglanguage,SQLServer2005asdatabasemanagementsystem,toachieveafileupload,fileonlinepreview,editxlsxfilefunction.

Thepaperisorganizedasfollowing:

firstly,analyzesthebackground,significanceoffunctiondesign;secondly,introducesthedevelopmenttoolsandthefoundationofthetechnology;andthenthefunctionalneedsanalysis,givesaspecificdesignprojectandadatabasemodel;thenshowstheimplementationofeachfunctionalmodule;finallythefeatureswerestrictlytest.

Keywords:

Fileupload；preview；onlineediting；detaileddesign；functionmodule；

1绪论

1.1选题背景

随着现代网络惊人的发展，人们对网上办公、在线存储等的需求也越来越大，而一次一次地上传文件显得越来越笨拙，在浏览上传文件时，不能清楚快速的分辨已上传的文件，而需要每次都打开一遍也是一件令人头疼的事，最重要的是如果在上传完之后，发现自己上传的文件中有一小点毛病需要修改，又需要删除原来的文件，再去重新上传一次文件，会让人觉得很繁琐。

非常不方便。

因此，基于的多文件上传、预览和在线编辑功能就应运而生了。

此功能的多文件上传操作方便，可以让用户看到上传进度，了解上传情况，更重要的是可以一次上传多个文件。

为用户上传许多文件时提供了更多的方便。

此功能还能够实现预览效果，让用户在查看已上传文件时可以预览到文件内容，方便用户辨识文件。

此功能最重要的是能够在线编辑修改已经上传的文档。

省去了用户在上传后发现出了一小点错误而需要重新上传的麻烦。

现在，国内对于上传、预览和编辑的研究都还处于分离阶段，上传功能已经发展的比较成熟，批量上传、显示进度上传等各种上传模式都已经被广泛运用，预览的功能在国内几家较大网站比较常见，比如XX、豆丁等网站。

而在线编辑的功能由于研究的不是非常多，所以还没有被广泛应用。

此功能特别的就是集上传、预览和编辑于一体，并能实现修改已上传文件，并保存至原文件中，不需要重新上传或者手动删除多余文件。

1.2选题意义

随着计算机技术的迅猛发展，各行各业纷纷运用网络技术进行文档管理，如何让文档的保存于查看变得更加清晰便捷，就是本次课题研究的意义所在。

为了提高工作效率，方便用户在上传文件后查看所上传文件，此次课题设计了文件在线预览的功能，极大地提高了用户正确上传文件的效率，简化了工作流程，另外，为了让用户能在发现所上传文件有错误后，能及时修改，此次课题还设计了在线编辑功能，让用户可以针对出现错误的文件直接在线编辑保存，无需删除原文件重新上传，只需要在线修改即可。

在文档管理中使用此课题功能可以有效为用户节省时间，大大提高用户的工作效率，而且此课题功能操作方便，简单易学。

因此，设计这样一个多文件上传、预览和在线编辑功能对需要网络存储文档和办公有着很好的使用意义。

1.3选题前景

随着计算机技术及网络技术的快速发展，以及广大用户对网络存储功能的使用率越来越高，为了提高工作效率，便于上传、查看以及修改，很有必要通过一个方便的功能实现对文件的有效操作，并且，现在的办公系统也越来越多地接触到文档存储功能，为了让方便办公人员的操作，同时有效提高办公效率，办公系统中加入此课题功能一定能省去不少麻烦，提高工作效率，简化工作流程，所以本功能将会有很好的应用范围和应用前景。

综上所述，基于的多文件上传、预览和在线编辑功能的应用前景是非常广阔的。

2基于的多文件上传、预览和在线编辑功能的分析

2.1多文件上传、预览和在线编辑功能的可行性分析

此功能的多文件上传操作方便，可以让用户看到上传进度，了解上传情况，更重要的是可以一次上传多个文件。

为用户上传许多文件时提供了更多的方便。

此功能还能够实现预览效果，让用户在查看已上传文件时可以预览到文件内容，方便用户辨识文件。

此功能最重要的是能够在线编辑修改已经上传的文档。

省去了用户在上传后发现出了一小点错误而需要重新上传的麻烦。

而如今电子信息化已经普及到了各个角落，电子文档的存储功能也被广泛应用于生活和工作的方方面面。

根据以上对本次课题功能的分析可知，这样的功能设计对于人们生活的方方面面有着很大的帮助，因此，设计这样的功能是非常可行的。

2.2基于的多文件上传、预览和在线编辑功能的需求分析

需求分析是软件开发流程中重要的一个环节，需求分析的基本任务是根据用户的需求，准确定义要完成的系统的目标，回答系统必须“做什么”的问题。

它的主要用途是明确系统需求，是用户人员之间进行讨论的基础，并作为系统设计、实现以及测试的依据。

只有准确全面的需求获取与分析才能保证系统设计、系统实现的顺利进行，为后期测试提供必要的支持。

在计算机网络，数据库和先进的开发平台上，利用现有的软件，配置一定的硬件，开发一个具有开放体系结构的，易扩充的，易维护的，具有良好人机交互界面的文件存储相关功能，实现用户对文件存储功能的要求，根据可行性研究的结果和用户的要求，此功能需要达到以下目标：

（1）必须实现多文件上传功能。

要实现一定数量限制的多文件上传功能，需要设定最多允许几个文件同时被选中上传，并做出上传进度条，方便用户随时了解文件上传程度。

（2）必须实现文件的预览功能。

对于文档文件，可在服务器上安装flashpaper以完成在线预览功能的实现。

对于图片文档，在网页上采用repeater控件将图片即时显示出来，以达到在线预览功能的实现。

（3）必须实现文档在线编辑功能。

将上传的文档文件内容以二进制流的形式上传至数据库。

在用户选择在线编辑时，文件则以二进制流的形式被传出至网页上的文本编辑器中，用户可在其中对文件进行编辑。

编辑完成后点击保存，便把文件又一次以二进制流的形式存入数据库中。

2.3系统选定的开发工具及关键技术

2.3.1ASP.NET技术

ASP.NET是微软公司推出的一种internet编程技术，是统一的WEB应用程序平台，它提供了为建立和部署企业级Web应用程序所必需的服务。

ASP.NET为能够面向任何浏览器或设备的更安全的、更强的可升级性、更稳定的应用程序提供了新的编程模型和基础结构。

ASP.NET是Microsoft.NETFramework的一部分，是一种可以在高度分布的Internet环境中简化应用程序开发的计算环境。

.NETFramework包含公共语言运行库，它提供了各种核心服务，如内存管理、线程管理和代码安全。

它也包含.NETFramework类库，这是一个开发人员用于创建应用程序的综合的、面向对象的类型集合。

ASP.NET集简单与高效于一身，可以非常直观地开发出复杂的WEB应用，是做开发设计的最新利器。

2.3.2C#开发语言

C#是微软公司在2000年7月发布的一种全新且简单、安全、面向对象的程序设计语言，是专门为.NET的应用而开发的语言。

它吸收了C++、VisualBasic、Delphi、Java等语言的优点，体现了当今最新的程序设计技术的功能和精华。

C#继承了C语言的语法风格，同时又继承了C++的面向对象特性。

不同的是，C#的对象模型已经面向Internet进行了重新设计，使用的是.NET框架的类库；C#不再提供对指针类型的支持，使得程序不能随便访问内存地址空间，从而更加健壮；C#不再支持多重继承，避免了以往类层次结构中由于多重继承带来的可怕后果。

.NET框架为C#提供了一个强大的、易用的、逻辑结构一致的程序设计环境。

同时，公共语言运行时（CommonLanguageRuntime）为C#程序语言提供了一个托管的运行时环境，使程序比以往更加稳定、安全。

2.3.3JavaScript脚本语言

Javascript就是适应动态网页制作的需要而诞生的一种新的编程语言，如今越来越广泛地被使用于Internet网页制作上。

Javascript是由Netscape公司开发的一种脚本语言（scriptinglanguage），或者称为描述语言。

在HTML基础上，使用Javascript可以开发交互式Web网页。

Javascript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。

2.3.4SQLServer2005

SQLServer2005是数据库管理系统，具备了通常数据库管理系统最基本的功能。

SQLServer2005是微软公司开发的一款软件产品，2005是其版本号。

MicrosoftSQLServer是一种基于客户机、服务器的关系型数据库管理系统，用来对存放在计算机中的数据库进行组织、管理和检索，它使用Transact-SQL语言在服务器和客户机之间传送请求。

2.3.5VisualStudio2008开发工具

MicrosoftVisualStudio2008是面向WindowsVista、Office2007、Web2.0的下一代开发工具,代号“Orcas”，是对VisualStudio2005一次及时、全面的升级。

VS2008引入了250多个新特性，整合了对象、关系型数据、XML的访问方式,语言更加简洁。

使用VisualStudio2008可以高效开发Windows应用。

设计器中可以实时反映变更,XAML中智能感知功能可以提高开发效率。

同时VisualStudio2008支持项目模板、调试器和部署程序。

VisualStudio2008可以高效开发Web应用，集成了AJAX1.0，包含AJAX项目模板，它还可以高效开发Office应用和Mobile应用。

2.3.6.NETFramework

.NETFramework又称.Net框架。

是由微软开发，一个致力于敏捷软件开发（Agilesoftwaredevelopment）、快速应用开发（Rapidapplicationdevelopment）、平台无关性和网络透明化的软件开发平台。

.NET是微软为下一个十年对服务器和桌面型软件工程迈出的第一步。

.NET包含许多有助于互联网和内部网应用迅捷开发的技术。

.NET框架是微软公司继WindowsDNA之后的新开发平台。

.NET框架是以一种采用系统虚拟机运行的编程平台，以通用语言运行库（CommonLanguageRuntime）为基础，支持多种语言（C#、VB、C++、Python等）的开发。

3基于的多文件上传、预览及在线编辑功能的总体设计

3.1功能整体设计的原则

在进行设计时，我们应对照系统的需求分析来进行功能的整体设计，在保证实现功能需求的基础上，逐步实现功能的设计。

在整个功能中按照它的实现可以划分为不同的几大模块，对各个模块再做相关的处理，在整体设计中主要的任务就是把整个功能的轮廓描述出来，按照实现功能的不同确立各个模块。

在做此设计时应遵循如下原则：

（1）规范性。

在设计的过程中要积极遵循各种规范，保证后期维护和开发人员能够快速理解功能的设计思路。

（2）易扩展性。

功能的设计直接决定可扩展性。

可扩展性是软件工程追求的目标，能够大大提高软件的复用程度。

3.2整体框架

此功能的开发是基于B/S模式的，整个功能对文件存储进行高效的管理，功能的每一部分都实现了其相关的功能，在整个设计中各角色分工明显，各司其职。

整体框架主要体现在多文件上传、文件在线预览、文档在线编辑三部分。

系统主要层次图如下：

3-1文档管理系统层次图

3.3模块功能简介

3.3.1多文件上传模块

多文件上传模块所完成的功能为：

允许多个文件同时上传、显示每个文件的上传进度条。

（1）用JavaScript脚本语言制作动画效果的上传进度条。

（2）在代码中设置每次最多允许上传文件数量。

3.2.2在线预览模块

在线预览所完成的功能为：

文档类文件的在线预览、图片类文件的在线预览。

（1）在服务器上安装flashpaper2.2以支持文档转换为swf格式的文件，然后利用flashpaper2.2完成文档文件的页面预览显示。

（2）在网页中运用repeater控件从接收上传文件的文件夹读取图片格式的文件，并即时显示在网页上。

3.3.3文档在线编辑模块

文档在线编辑是本功能的核心，主要完成已上传文件的在线编辑保存功能。

（1）将文档内容以二进制流的形式上传至数据库中。

（2）用户在选择编辑后，将文件以二进制流的形式传入网页的文本编辑器中以供用户编辑修改。

（3）用户修改完毕，点击保存后再将新的文件以同样的二进制流的方式存回数据库相应位置。

3.4体系结构的设计

现有的系统体系结构可以是C/S或B/S两种形式。

但从业务需求的角度来说，建立B/S结构的文档管理系统更加符合系统的需求。

B/S结构有三层的模式，即客户端，中间逻辑层，数据库层。

这种结构具有以下的优点：

（1）容易维护。

客户端不需要安装单独的客户端应用程序，只需要一个浏览器即可，对客户机所采用的平台无限制，管理及维护工作全部在服务器端进行，增加客户端的应用系统的管理、维护工作量基本不变。

（2）可扩展性好。

（3）可重用性好。

当多个页面需要进行相同的事务处理时，只需调用相应的事务处理组件即可。

3.5数据库设计

数据库设计是电子文档管理系统设计的很重要的一部分，将影响到系统以后数据的质量、数据库的可扩展性、数据运行的效率等，设计又分逻辑结构和物理结构两部分。

关系型数据库是目前广泛应用于管理信息系统的开发一种数据库，关系型数据库通过建立数据之间的关系来减少数据间的冗余，减少对数据的操作，从而减少误操作，提高效率。

关系型数据库可通过建立数据间的关系将电子文档管理过程的各个环节的数据整合起来。

由于在此功能的设计中只有文档在线预览功能需要用到数据库，因此，在此设计功能的实现过程中，我们采用的数据库是SQLServer2005，根据系统实现的需求，我们需创建1个数据表以便存储相应的数据信息。

数据表的介绍如下：

文档文件表Doc,用于存储文档的相关信息：

表3-1文档文件表

字段名

类型

可否为空

是否主键

备注

docname

int

NOTNULL

是

文件名

docfile

byte

NOTNULL

否

文件内容

4多文件上传、预览和在线编辑功能的详细设计

4.1功能设计的整体流程

本节将介绍此设计的具体实现过程，开发出基于B/S模式的电子文档管理系统，核心即实现文档的批量上传、预览及在线编辑。

整个功能设计的简单流程图如图4-1：

图4-1功能设计的简单流程图

4.2功能设计核心功能实现

该功能设计的核心功能即实现多文件上传、在线预览编辑。

本选题主要使用FlashPaper实现文档的在线显示，工作原理就是用FlashPaper虚拟打印机将文档转换为swf格式的文档。

FlashPaper是Macromedia推出的一款电子文档类工具，通过使用本程序，你可以将需要的文档通过简单的设置转换为swf格式的Flash动画，原文档的排版样式和字体显示不会受到影响，这样做的好处是不论对方的平台和语言版本是什么，都可以自由的分享你所上传的电子文档，并可以进行自由的放大，缩小，翻页等操作，方便我们更好的对文档进行管理。

4.2.1实现文件上传

（1）核心代码

Aspx页面中核心代码：

$（document）.ready（function（）

{

$（"#uploadify"）.uploadify（{

'uploader':

'js/jquery.uploadify-v2.1.0/uploadify.swf',//指定上传控件的主体文件，默认‘uploader.swf’ˉ

'script':

'UploadHandler.ashx',//指定服务器端上传处理文件

'cancelImg':

'js/jquery.uploadify-v2.1.0/cancel.png',//指定取消上传的图片

'folder':

'hebe',//要上传到的服务器路径

'queueID':

'fileQueue',

'auto':

false,//选定文件后是否自动上传

'fileExt':

'*.doc;*.docx;*.ppt;*.pptx;*.xls;*.pdf',//是否允许同时上传多文件

'fileDesc':

'允许的类型：

.doc;.docx;.ppt;.pptx;.xls;.pdf',//出现在上传对话框中的文件类型描述

'fileExt':

'*.rar;*.zip;*.doc;*.ppt;*.xls;*.bmp;*.docx;',//控制可上传文件的扩展名，启用本项时需同时声明fileDesc

'sizeLimit':

31457280,//控制上传文件的大小，单位byte30mb

'queueSizeLimit':

10,//当允许多文件生成时，设置选择文件的个数

'simUploadLimit':

10,//多文件上传时，同时上传文件数目限制

'buttonText':

'upload',//浏览按钮的文本

'width':

110,//设置浏览按钮的宽度，默认值：

110。

'height':

30,//设置浏览按钮的高度，默认值：

30.

/*上传出错执行--针对单个文件*/

'onError':

function（event,queueId,fileObj,errorObj）

{

variframe=document.getElementById（"fileres"）