视频点播系统前台的设计与实现毕业论文.doc

毕 业 设 计（论 文）题 目： 视频点播系统前台的设计与实现 姓 名： 专 业： 软件技术 班 级： 软件1011 指导教师： 日 期： 2013年4月30日 毕 业 设 计 (论 文) 任 务 书专业 班级 姓名 学号 一、毕业设计（论文）题目 二、毕业设计（论文）工作自 年 月 日起至 年 月 日止三、毕业设计（论文）基本要求：1在老师的指导下进行论题调研。 学生接到毕业论文的任务后，必须认真了解论题所涉及的理论、现状、问题等方面的实际情况，搜集有关数据、图表及文献资料。 2在老师的指导下进行文献的检索。 必须广泛了解与论题有关的国内外研究现状，做好与自己论题有关的文献筛选，并把这些文献应用在自己论文的写作中。 3学生在论文安排开题后3周内写好论文大纲。大纲的主要内容包括本课题的研究现状和目前存在的问题；分析存在这些问题的原因，要有数据或者资料支持； 在分析的基础上，提出解决问题的思路或者办法。 4在2010年5月15日之前上交论文，并参加学校组织的论文答辩。 5本文在研究过程中采取的具体研究方法,如：调查法、案例分析法、文献研究法等方法。 6 认真撰写论文提纲、摘要、前言、正文、致谢、参考文献等内容；严禁抄袭，论文观点正确，论据充分，结构严谨，思路清晰，结论可行；按期交稿，4000字以上，按写作规范要求装订。 指导教师： 毕业设计(论文)考核评议书指导教师评语： 建议成绩： 指导教师签名： 年 月 日答辩小组意见：负责人签名 年 月 日答辩小组成员 毕业设计（论文）答辩委员会意见： 负责人签名： 年 月 日目录摘要1第一章 绪论21.1研究现状及其发展趋势21.2 研究目的及意义2第二章 系统需求分析32.1 系统可行性分析32.2系统功能需求3第三章 系统介绍以及相关技术43.1 系统设计相关技术53.1.1 选用B/S体系结构53.1.2 系统开发平台的选择63.1.3 MySQL数据库简介9第四章 系统设计104.1系统总体结构设计104.2功能模块设计104.1.1用户注册模块设计114.2.2用户登录模块设计114.2.3视频上传模块设计12第五章 程序开发135.1数据库设计135.3系统所有实体类以及映射文件介绍145.5数据库连接配置165.6系统的配置与启动175.7 系统部分页面以及代码175.7.2 主要类和代码22结论27摘 要随着时代进步，人类对于信息存储方式和质量的要求也日渐提高，最初，人们没有发明文字，就用一些物体来记录发生的大事，比如古代波斯人就用绳子来记录发生的事，又或者画图来记录发生的大事；随后人们发明了文字，拥有文字的民族就运用文字来记录过去所发生的重大事件而形成历史，比如中国古代的二十四史；到了19世纪人类发明了相机，用照片记录人类历史，到了二战后期，美国人发明了世界第一台计算机，直到现在计算机和内存在不断的更新和发展，并且到了今天互联网也发展到了一个繁荣阶段，几乎每时每刻都有庞大的数据量在互联网上传输，人们需要的存储的信息也记录到内存中，而现在人们所需要记录的数据形式也有较大的改变，比如某些重要的需要记录的新闻，又或者一些人记录的一些有纪念价值的信息，相对用照片或者文字来说，用视频形式表现出来则更具体。 众所周知，现在，人们通过视频图像来获取信息量的大部分得来源是互联网和电视，但是电视往往不能第一时间将新的消息传达到人们，因此互联网相对电视来看，更适合将重大新闻的视频图像传达给用户。而且，视频对于人们来说已经不仅仅拘泥于只是用来做存储重要新闻信息的手段，更倾向不同人群的不同需求，比如现在的一些拍客，喜欢把自己拍到的有趣的一些东西给朋友分享，或者一些学者为了能让学生们，而通过互联网，能更方便快捷实现人们对不同的视频的不同需求。第一章 绪论1.1研究现状及其发展趋势新媒体是2006年最流行的词汇之一，所谓新媒体是指应用在数字技术、在传统媒体基础上改造、或者更新换代而来的媒介或媒体。新兴媒体与传统媒体在理念和应用上并无本质区别。所谓新兴媒体是指在传播理念、传播技术上，传播方式和消费方式等方面发生了质的飞跃的媒介或媒体，它既必须是在形态上前所未有的媒介或媒体，有必须是一种在理念上和应用上新颖的的媒介或媒体。1.2 研究目的及意义作为互联网在线视频播放上传的服务网站，最终的目的是实现用户上传视频，实现用户自己的需求，例如通过上传的视频秀自己、把有意义的视频上传到互联网一方面可以和朋友一起分享，一方面也能通过视频和其它人进行交流，也可以将一些教学视频上传到互联网，让别人查阅学习，还可以上传一些娱乐类视频，例如可以上传电视剧剧集、电影、明星的演唱会，娱乐节目视频，供用户观看，也可以将当天发生的一些新闻或者用户经历过并拍摄下来的重大事件上传到互联网，进而来满足用户们的不同需求。第二章 系统需求分析作为网上视频播放上传系统的第一步，需求分析是至关重要的一步，是来通过描述系统的需求定义系统中的重要功能模块，进而建立模型，需求分析是用户与系统开发者之间关于该系统细节与功能之间的互相沟通，达到各个功能模块都有明确的设计方案，所以，需求分析是该系统的开发人员和用户共同完成的，通过需求分析来明确系统是否符合对应用户的需求，或者适用于哪些用户。2.1 系统可行性分析系统可行性分析是通过系统调查，对系统开发的技术、社会、经济三方面来判断该系统是否具备开发的可行性和必要性，避免投资失误造成的损失，其目的是以最短时间，最小代价，确定系统是否有开发必要，能否开发，值得开发，在技术和经济等方面都可行，并且能实现低投入和视频点播上传。因此，视频点播系统的开发是完全可行的。2.2系统功能需求网上视频点播系统是一种能够在线播放视频，上传视频的网站，目的是希望人们既能观看别人视频，也能自己上传自己的视频秀下自己，满足当今人们的精神需要。通过自己对一些视频网站的考察，网上视频点播系统应该有以下功能：包括用户的注册、登录、视频查询、视频上传、视频播放、视频评论、提出问题、回复问题等系统功能完善。第三章 系统介绍以及相关技术 本系统为B/S架构的网站视频点播系统，开发模式方面采用的是经典的MVC模式，前台方面没有运用struts等框架，考虑到个人开发，因此是纯jsp页面，jsp页面包含HTML语言，其中包含JavaScript卷标，当中的JavaScript函数用于传递JSON以及对窗体进行验证、提交等功能，并且采用JQuery-ui等接口代码库，会是接口看起来更加友好，中间C层，也就是控制层，也同样没有采用任何类似spring等框架，也是仅由servlet直接构成，持久层框架采用的mybatis，通过configuration.xml来调用相应的存储了sql语句的xml文件，来实现对数据库的访问和操作。本系统开发所用IDE为MyEclipse 6.5、数据库为MySQL，web服务器为tomcat 5.5，系统整体尽力追求模块化，追求“高内聚、低耦合”，力求安全性、方便性、实用性，同时也严格按照MVC的方式将各个功能模块隔离，这样便于后期维护和管理。本系统的特点:1、本系统是B/S的web项目，采用分布式开发，因此只要能够访问internet就能访问本系统的一些功能。2、本系统虽然在前台接口和中间控制器方面都没有采用流行的struts、struts2或spring框架，只有数据库采用了mybatis框架，因而没有采用当下流行的SSH，但是本系统代码方面力求简洁，并在各种逻辑处理前添加注释，实现易于修改，易于维护。3、功能模块之间追求“高内聚，低耦合”而相对独立，修改时对其他模块没太大影响。4、用户接口友好，操作简单，使用方便3.1 系统设计相关技术3.1.1 选用B/S体系结构现今的管理系统主要分为两大种：客户端和服务器端(C/S)、浏览器端/服务器端(B/S)，而绝大多数的浏览器端/服务器端(B/S)都是分布式多层结构的，本系统采用的也是浏览器端/服务器端(B/S)形式，分布式开发。浏览器/服务器(B/S)结构在服务器端，采用的是web服务器，而在客户端方面，则不想C/S那样需要客户装有客户端软件，而是利用客户端机器上已装有的浏览器，B/S也正是Browser/Server缩写，用户通过浏览器访问系统的页面，输入信息，通过数据流传到服务器处理，服务器再将静态数据传到用户的浏览器中，这样的通过浏览器和服务器间一次次会话来实现用户的操作。相比之前的客户端和服务器端(C/S)结构，浏览器/服务器(B/S)结构更适合商业项目的开发，对于用户来说更方便，更安全，不需要安装庞大的客户端软件，仅需要客户通过浏览器访问网站即可。一般的浏览器/服务器(B/S)结构基本分为三部分，第一部分为用户操作接口，第二部分是web服务器的处理机制，第三部分为后台数据库。用户操作接口是浏览器软件，用户是通过浏览器的窗体将数据传递给后台，浏览器无所谓类型，版本，微软的IE、火狐、chrome都可以，通常用户就是这样通过浏览器和后台数据库进行交互，第二层web服务器的处理机制基本是接收用户通过浏览器里网页的窗体传过来得数据，来选择执行以后的流程和逻辑，并且这些流程和逻辑处理中还会涉及到数据库，进而对数据库进行操作。第三层数据库方面就和客户端和服务器端(C/S)结构差不多，因为大部分对数据库操作的逻辑都存在于web服务器中，所以数据库方面也是依靠web服务器中逻辑来执行，不过web服务器对数据库的执行逻辑产生的结果需要web服务器形成静态结果返回给用户的浏览器端显示。通过以上对C/S结构和B/S结构系统分析，网上视频点播系统，不需要用户太多复杂操作，而且现今视频播放不需要利用客户端的播放器，而是采用流行的flash播放器播放，所以采用B/S结构来制作更适合。而且通过对现今商业项目的考察，B/S结构这种上世纪90年代流行起来的开发结构正在逐步代替C/S结构，到现今基本成为商业项目开发的主流，因为它的方便性，易于维护，安全性，仅需能够连接internet的浏览器就可操作的特性，所以本系统采用B/S结构。3.1.2 系统开发平台的选择JAVA在语言方面，我选择了J2EE，而不是其它诸如、C#等，因为从JAVA发展到现在，已经成为web商业项目的霸主，现今几乎大部分的web项目都采用了J2EE编程，因为JAVA本身是跨平台的、是开源的、并且发展了这么长时间，J2EE技术方面也出现了多框架，比如web框架struts、struts2，轻量级控制反转面向方面的框架spring，以及持久层框架hibernate、ibatis等，当然选择JAVA不仅是因为以上这些，更重要的是它本身具有的几个特性：1. JAVA语言的简单性虽然在思维逻辑方面和C、C+是两种不同的世界，但是JAVA语言的语法和C、C+很接近，这使得大多数程序员能很容易的就学习并且使用JAVA，并且JAVA不像C+那样，包含一些很少使用的、晦涩难懂的、令人迷惑的特性，例如操作符重载、多继承、自动的强制类型转换，最重要的是JAVA没有指针的概念，因为内存处理等方面问题，都是由虚拟机来执行并分配，并且JAVA提供了垃圾回收机制，如果对象失去引用，将会被垃圾回收，消失，这使得JAVA程序员不必像C或C+程序员那样为内存问题而困扰。2. JAVA是纯面向物件的JAVA语言提供了类、接口、继承等原语，为了方便，JAVA不像C、C+那样，支持多继承，JAVA只支持单继承，但是接口是多继承的，因此JAVA通过单继承类，多继承接口，也能实现多继承，并且支持类与接口之间的实现机制，JAVA语言全面支持动态绑定，相比C+语言只对虚函数使用动态绑定，并且JAVA语言是以类为基础的，所有功能都封装在类中，只有通过对象来调用相应的方法，才能实现该功能，是真正实现了数据和业务的封装，总之，JAVA是纯面向对象的。3.JAVA语言是分布式的JAVA语言支持internet应用的开发，在基本的JAVA应用编程接口中有一个网络应用编程接口，并且它提供了用于网络应用编程的类库，包括URL、URLConnection、Socket、ServerSocket等，所以说利用JAVA也完全能够写出TCP/IP或者UDP类型的聊天系统。同时JAVA的远程方法启动机制也是开发分布式应用的重要手段。4.JAVA语言是健壮的首先JAVA的强制类型机制，不像C或者C+那样对类型要求松懈，这使得JAVA语言出现BUG几率降低不少；其次JAVA的异常处理机制的设计和使用是完全成功的，异常处理机制可以算作一种逻辑处理的信道，例如业务逻辑处理流程可能会出现异常或者BUG，可以通过异常处理机制截获通过catch语句加以处理；再次JAVA的垃圾处理机制，可以让JAVA程序员感觉更方便，不像C+那样，创造出的对象，还需要程序员自己写析构函数，对对象进行析构，JAVA的垃圾回收机制巧妙在如果对象失去引用，将自动对该对象进行回收，进而释放该对象所占内存空间。5.JAVA语言是安全的JAVA语言通常被用在网络环境中，为此，JAVA提供了一个安全机制以防御恶意代码的袭击，并且JAVA拥有虚拟机，关于内存方面处理分配，都是通过JAVA的虚拟机来处理的，因此JAVA没有指标概念，不像其它C或者C+程序那样，需要程序员自己来对内存进行处理，这样会导致程序本身的BUG，甚至会危害操作系统本身，由于现今大多数用户用的操作系统是windows，而微软的windows有C代码构成，所以这就是为什么windows会出现这么多漏洞，微软会发布那么多补丁。除了JAVA语言具有的许多安全特性以外，JAVA对通过网络下载的类具有一个安全防范机制，ClassLoader类，如分配不同的名字空间以防替代本地同名类，字节代码检查并提供安全管理机制，SecurityManager类，让JAVA应用设置安全哨兵，因此JAVA语言是具有安全性的。数据库的引用 数据库的历史可以追溯到五十年前，那时的数据管理非常简单。通过大量的分类、比较和表格绘制的机器运行数百万穿孔卡片来进行数据的处理，其运行结果在纸上打印出来或者制成新的穿孔卡片。数据库系统的萌芽出现于60 年代。当时计算机开始广泛地应用于数据管理，对数据的共享提出了越来越高的要求。传统的文件系统已经不能满足人们的需要。能够统一管理和共享数据的数据库管理系统（DBMS）应运而生。在数据库随后的发展中，关系数据库、结构化查询语言、面向对象数据库等数据库的重要技术也应运而生。为什么要使用数据库技术，因为尽管文件系统可以解决不少问题，有些问题是文件系统所无法解决的，如果给文件系统加上这些特性，那么文件系统也就成为了一个数据库。1.数据的冗余与数据不一致：重复数据多，而且对于分布式，有可能出现数据无法同步的问题。2.数据访问困难，数据孤立：因为数据存储没有采取同样的格式，使得使用统一的接口访问数据变得不可能。3.完整性问题：数据的正确性和兼容性。4.原子性问题：就是事务处理，如何保证一个操作的完整性。5.并发访问：这也是事务处理的一部分，数据库需要应对同时异地对同一个数据操作的可能。6.安全性问题：主要是数据库访问权限问题。为什么使用数据库，因为高效,有序,安全,多方的组织,存储,读取组织数据，并且使用数据库可以带来许多好处：如减少了数据的冗余度，从而大大地节省了数据的存储空间；实现数据资源的充分共享等等。此外，数据库技术还为用户提供了非常简便的使用手段使用户易于编写有关数据库应用程序。特别是近年来推出的微型计算机关系数据库管理系统dBASELL，操作直观，使用灵活，编程方便，环境适应广泛(一般的十六位机，如IBM/PC/XT，国产长城0520等均可运行种软件)，数据处理能力极强。数据库在我国正得到愈来愈广泛的应用，必将成为经济管理的有力工具。3.1.3 MySQL数据库简介 本系统的数据库方面，选用的是MySQL，原因是MySQL的单表查询是最为迅速的，而且作为一个网上视频点播系统，没有像其它系统那样需要多表联查的环境和条件那么多，大多数情况下都只是单表查询，因此本系统的数据库方面选择了它。MySQL是一个小型关系型数据库管理系统，开发者为瑞典MySQL AB公司。在2008年1月16号被Sun公司收购。而2009年,SUN又被Oracle收购.对于MySQL的前途,没有任何人抱乐观的态度.目前MySQL被广泛地应用在Internet上的中小型网站中。由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，许多中小型网站为了降低网站总体拥有成本而选择了MySQL作为网站数据库。 MySQL最初的开发者的意图是用mSQL和他们自己的快速低级例程去连接表格，不管怎样，在经过一些测试后，开发者得出结论：mSQL并没有他们需要的那么快和灵活。这导致了一个使用几乎和mSQL一样的API接口的用于他们的数据库的新的SQL接口的产生，这样，这个API被设计成允许为用于mSQL而写的第三方代码更容易移植到MySQL。第四章 系统设计4.1系统总体结构设计网上视频点播网站设计主要实现的功能是视频的播放，视频上传，本系统基于B/S架构而开发，采用MVC模式一，其中前台页面统一JSP，控制层为servlet，持久层由POJO构成，加上持久层框架habernate，本论文通过介绍本系统运用的技术在国内外的发展，和技术本身特点，并阐述采用这些技术的必要性，以及各个模块的主要功能，其中包括：用户权限管理模块、用户信息管理模块、用户信息查询模块、视频文件管理模块、视频文件查询模块等。对于类似的视频网站有一定参考价值。4.2功能模块设计通过上述各个功能模块简略介绍，总结出网上视频点播系统主要功能模块为：用户注册、登录、视频查询、视频上传、视频管理、用户信息管理，用户信息查询等。4.1.1用户注册模块设计用户注册模块将采用dwr来实现动态识别功能，在脚本段中利用JAVAScript中方法来判断用户名是否以重复，若重复，将在姓名的文本框后面显示提示信息，告诉用户用户名重复，密码和其它网站注册形式一样，输入两次同样密码，注册时用户必须填写的有姓名、 密码、昵称、所在省市，必填项都是通过JAVAScript函数来实现检验必填项是否已填写，只有必填项都填写之后并且不存在用户名重复，才能完成注册，图3-2-1是用户注册模块的程序流程图。4.2.2用户登录模块设计用户登录时，将用户名和密码填写，先判断该用户名是否存在，若不存在则提示先注册，否则判断密码是否正确，如果密码不正确则返回通知密码错误重新填写，只有用户名和密码和数据库记录一直，登录才成功。图3-2-2是用户登录模块的程序流程图。图：3-2-1 图：3-2-2用户登录用户注册NN用户名是否重复用户名是否正确NYY两次密码一致输入密码填写信息NN密码是否正确已填写必填项YY登录成功注册成功4.2.3视频上传模块设计视频上传只限定用户上传，该模块的程序流程图，如图3-2-4所示。图：3-2-4开始上传选择本地视频开始上传上传完毕第五章 程序开发5.1数据库设计 经过反复思考,本系统中用到9长表，分别是quesanswerinfos,questiongroups,questioninfos,scoresgrades,scoresrules,users,videanswerinfos,videogroups,videoinfos表的结构如图5-1-1所示：图：5-1-1Quesanswerinfos：问题答案表。Questiongroups：问题分组表。Questioninfos：问题信息表。Users.java：用户表。Videanswerinfos：视频答案表。Videogroups：视频分组表Videoinfos：视频信息表。Scoresgrades：积分规则表Scoresrules：积分表5.2文件结构与用途在程序开发阶段，首先确定“视频点播系统的”名称为prj1，根据程序设计的内容，建立prj1工程。Prj1工程的源代码结构如图5-2-1所示：图：5-2-1结构目录的介绍：Src：存放所有的java类。Resource：连接数据库资源文件，log4j配置文件以及系统中其非web文件。Fckeditor：Fckeditor所有的资源文件(系统中评论时用到)。WebRoot：存放所有的web显示所需的资源文件。5.3系统所有实体类以及映射文件介绍所有的实体类都存放在”changes.framework.domain”包中，相应的映射文件在”changes.framework.domain.hbm”包中。数据库中有9张表，其中7张表有对应一个实体类。实体类与映射文件目录如图5-3-1所示：图：5-3-1Quesanswerinfos.java：问题答案的实体类。Questiongroups.java：问题分组实体类。Questioninfos.java：问题信息实体类。Users.java：用户实体类。Videanswerinfos.java：视频答案的实体类。Videogroups.java：视频分组实体类Videoinfos.java：视频信息实体类。5.4主要文件介绍Struts.xml:struts2的主要配置文件，如图5-4-1所示。图：5-4-1applicationContext.xml：spring的主要配置文件Dwr.xml：dwr配置文件Web.xml：项目的配置文件，主要配置：Spring配置代码：contextConfigLocation/WEB-INF/applicationContext*.xmlorg.springframework.web.context.ContextLoaderListenerSturts2配置代码struts2org.apache.struts2.dispatcher.FilterDispatcherstruts2/*dwrorg.directwebremoting.servlet.DwrServletdebugtruedwr/dwr/* 5.5数据库连接配置本系统的持久层使用了hibernate框架，程序运行时，如果将要对持久层操作，会执行工厂方法创造session，该session进而会加载applicationContext.xml文件，如图5-5-1。图：5-5-15.6系统的配置与启动数据库连接配置在resource文件夹中perties文件中配置，主要配置有：数据库驱动:dataSource.driverClass数据库地址连接：dataSource.url数据库用户名：dataSource.userName=root数据库密码dataSource.userPwd=123Hibernate中MySQL方言：hibernate_dialectHibernate中自动更新加载：hibernate_hbm2ddl_autoHibernate中显示sql语句：hibernate_show_sql5.7 系统部分页面以及代码5.7.1 主要页面首页：本页面是整个系统的主页，包含基本的视频查询功能，或者点击视频下面的超链接即可进入视频观看页面，也包含了登录功能，也能够通过注册的超链接进入注册页面，本人不太擅长页面美工，但是功能已经完全实现。如图5-7-1-1图：5-7-1-1视频分组页面：显示视频分组的页面和最新视频信息，本页面中可以提供上传本分组下的视频连接。如图5-7-1-2。图：5-7-1-2问题分组页面:显示问题所有分组，待解决问题以及已解决问题的页面。如图5-7-1-3。图：5-7-1-2问题信息页面：显示问题所有信息页面，以及问题解答答案信息。当用户登陆进来之后，会显示解答问题的窗口进行解答。如图5-7-1-3。图：5-7-1-3视频信息页面：显示视频分组，视频信息，播放视频。当用户登陆进来之后，会显示视频评论窗口进行评论。如图5-7-1-4。图：5-7-1-3上传视频页面：当用户登录系统后，点击 上传视频 连接会进入此页面填写视频信息，并上传。如图5-7-1-5所示。图：5-7-1-5用户注册页面：在首页点击 注册 连接进入此页面，填写用户信息并注册，注册完会成为系统的真正用后，可以登录进系统，权限更多。如图5-7-1-6所示。图：5-7-1-6娱乐页面：点击 娱乐专区 连接可以进入。本页面有小游戏可以进行娱乐还有 百度地图 连接。(百度地图：是通过百度提供的百度地图API而实现的可以实现百度地图功能的接口)。如图5-7-1-7所示。图：5-7-1-65.7.2 主要类和代码enterIndexAction.jsp：代码非常简单，在web.Xml文件中配置欢迎页面，主要是负责进入首页时自动发送请求给struts2进行跳转，此过程是通过javascript实现的。主要代码：top.location.href=enterIndexAction!enterIndex.action;EnterIndexAction.java：代码非常简单，当enterIndexAction.jsp文件发送过来的请求进行处理并返回给struts2，再进入首页(index.jsp)主要代码，如图5-7-2-1所示。图：5-7-2-1Page.java：系统主要文件。分页对象.用于包含数据及分页信息的对象，Page类实现了用于显示分页信息的基本方法，但未指定含数据的类型，可根据要实现以特定方式组织数据的子类，如RowSetPage以RowSet封装数据，ListPage以List封装数据。主要代码，如图5-7-2-2所示。图：5-7-2-2/* * 获取任一页第?条数据在数据库中的位置，每页条数使用默认? */ public static int getStartOfAnyPage(int pageNo) return getStartOfAnyPage(pageNo, DEFAULT_PAGE_SIZE); /* * 获取任一页第几条数据在数据库中的位什么 */ public static int getStartOfAnyPage(int pageNo, int pageSize) int startIndex = (pageNo - 1) * pageSize + 1; if (startIndex 1) startIndex = 1; return startIndex; 问题信息代码：在QuestioninfosAction.java文件中，用来存放所有的视频信息对象并跳转到jsp页面。返回一个page对象。如图5-7-2-3所示。图：5-7-2-3上传视频选择文件js代码：在uploadvie