统一通用文件上传、下载、预览、编辑组件设计

一直以来,无数个项目有这样的需求,然而每个项目做起来都自己开发一套,于是想自己设计实现这样一个组件,实现文件的统一存储、 上传、下载、预览、编辑功能,接口统一,对开发人员完全透明。思路如下:

1、采用统一数据库存储文件元数据信息,文件与业务数据关联信息

2、集成uploadify、Huploadify,html5和flash双内核文件上传

3、集成weboffice,word文档在线编辑

4、集成flexpaper、pdfjs, html5和flash双内核word文档在线查看

5、集成flowplayer、html5video, html5和flash双内核在线视频播放

6、集成highslide,图片、相册在线查看

7、实现文件统一上传、下载、预览、编辑接口

之后面临一系列后续优化问题,主要涉及视频文件转MP4(支持HTML5在线播放),word转pdf、pdf转swf,图片转缩略图等格式转换要求,文件MD5校验(用于重复上传检测,也就是秒传功能),断点续传上传问题等。看来实现这样一个系统还是挺复杂的,不过好在目前除文件格式转换、文件MD5校验、断点续传上传问题外,其它均已实现,效果非常好,有兴趣可以交流。

时间: 2024-12-27 12:12:00

统一通用文件上传、下载、预览、编辑组件设计的相关文章

【转】文件上传前预览

网上找到的一份文件上传前预览的代码,转自JavaScript 图片的上传前预览(兼容所有浏览器) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> #preview, .img, img { w

form表单系列中文件上传及预览

文件上传及预览 Form提交 Ajax 上传文件 时机: 如果发送的[文件]:->iframe, jQurey(),伪Ajax 预览 import os img_path = os.path.join('static/img', fafafa.name) with open(img.path, 'wb') as f: for item in fafafa.chunks(): f.write(item) function iframeSubmit(){ $('#ifm1').load(functi

js的FileReader实现图片文件上传、预览

js的FileReader实现图片文件上传.预览 FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以将资料(例如图片)内嵌在网页之中,不用放到外部文件.使用Data URL的好处是,您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料:而缺点便是,网页的大小可能会变大.它适合应用在内嵌小图片,不建议将大图像文件编码成Data URL来使用.您的图像文件不能够超过浏览器限定的大小,否则无法读取图像文件.1

servlet实现文件上传,预览,下载和删除

CreateTime--2017年9月4日09:24:59 Author:Marydon 一.准备工作: 1.1 文件上传插件:uploadify: 1.2 文件上传所需jar包:commons-fileupload-1.3.1.jar和commons-io-2.2.jar 1.3 将数据转成JSON对象需要jar包:commons-beanutils-1.8.3.jar.commons-collections-3.2.1.jar.commons-lang-2.6.jar.commons-log

结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程

1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用,整合两者可以实现我们常规的Web数据导入操作,导入数据操作过程包括有上传文件,预览数据,选择并提交记录等一系列操作. 关于这个插件,我在早期随笔<Bootstrap文件上传插件File Input的使用>也做了一次介绍,这是一个增强的 HTML5 文件输入控件,是一个 Bootstrap 3.x

form里面文件上传并预览

其实form里面是不能嵌套form的,如果form里面有图片上传和其他input框,我们希望上传图片并预览图片,然后将其他input框填写完毕,再提交整个表单的话,有两种方式! 方式一:点击上传按钮的链接弹出上传页面,上传文件,上传完毕再返回表单页面:这种比较简单,其实就是表单页面的上传按钮仅仅是一个链接,仅用于打开上传文件的弹出页面: 方式二:就是表单里面有<input type="file" name="picture"/>,点击上传按钮后,会在上传

JavaWeb文件上传下载,使用fileupload组件

一.引入jar包 1. commons-fileupload-1.2.1.jar 2. commons-io-1.4.jar 二.文件上传 1. html代码 1 <form name="upload_test" action="${pageContext.request.contextPath}/FileServlet?method=upload" method="post" enctype="multipart/form-da

web端文件上传,预览,下载,删除

//HTML部分 <div class="item attachment attachmentNew"> <span class="name">附件</span> <span class="triggerUpLoad btnSpan" onclick="triggerUpLoadList(this)" v-show="operationType<2">&

支持多文件上传,预览,拖拽,基于bootstra的上传插件fileinput 的ajax异步上传

首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="__PUBLIC__/CSS/fileinput.css" /> <script type="text/javascript&