wex5 教程之 图文讲解 文件上传attachmentSimple(1)

时间:2023-03-08 15:33:47
wex5 教程之 图文讲解 文件上传attachmentSimple(1)

视频教程地址:http://v.youku.com/v_show/id_XMTc4NDAyMTY4OA==.html

效果预览:

1 调用attchmentSimple组件,打开文件管理器,并选中,显示选中照片名称

wex5 教程之 图文讲解 文件上传attachmentSimple(1)

wex5 教程之 图文讲解 文件上传attachmentSimple(1)

2 图片上传成功,并在img组件中预览

wex5 教程之 图文讲解 文件上传attachmentSimple(1)

wex5 教程之 图文讲解 文件上传attachmentSimple(1)

3 数据库写入成功,并成功被其它页面引用

源码初探

附件组件attachmentSimple是wex5文件上传与下载重要的处理工具。研究其源码,可以判断其实现逻辑与内置方法,便于前后端调用。

  源码位置:

wex5 教程之 图文讲解 文件上传attachmentSimple(1)

 组件样式:

wex5 教程之 图文讲解 文件上传attachmentSimple(1)

require('css!./css/attachment').load()  为wex5 css样式引用方法

组件样式,可以在attachment.css文件中修改,例如背景,颜色,进度条,按钮等。

初始化upload参数:

wex5 教程之 图文讲解 文件上传attachmentSimple(1)

与组件前台对应关系为:

wex5 教程之 图文讲解 文件上传attachmentSimple(1)

 监控事件:

1 开始上传

wex5 教程之 图文讲解 文件上传attachmentSimple(1)

2 上传进度

wex5 教程之 图文讲解 文件上传attachmentSimple(1)

3  文件选中

wex5 教程之 图文讲解 文件上传attachmentSimple(1)

4 上传成功

wex5 教程之 图文讲解 文件上传attachmentSimple(1)

5 上传失败

wex5 教程之 图文讲解 文件上传attachmentSimple(1)

上述监控事件,在前台调用,执行相关回调方法,并传参。

执行方法:

1 获取文件路径

wex5 教程之 图文讲解 文件上传attachmentSimple(1)

2 图片预览

wex5 教程之 图文讲解 文件上传attachmentSimple(1)

3 删除文件

wex5 教程之 图文讲解 文件上传attachmentSimple(1)

4 文件下载

wex5 教程之 图文讲解 文件上传attachmentSimple(1)

5 文件复制

wex5 教程之 图文讲解 文件上传attachmentSimple(1)

后端服务改装

1 复制action及java文件到工程目录,并改名称

wex5 教程之 图文讲解 文件上传attachmentSimple(1)

wex5 教程之 图文讲解 文件上传attachmentSimple(1)

2  修改存储路径

wex5 教程之 图文讲解 文件上传attachmentSimple(1)

系统默认路径为baasPath + File.separator + "data" + File.separator + "attachmentSimple";

修改为自已工程目录下,便于一键上传资源。

数据库设计

建立上传相关字段

wex5 教程之 图文讲解 文件上传attachmentSimple(1)

前端设计

1 放入attachmentSimple组件

wex5 教程之 图文讲解 文件上传attachmentSimple(1)

2 设置参数

绑定数据库字段,执行action(必须)

wex5 教程之 图文讲解 文件上传attachmentSimple(1)

accept类型 ,选项将决定能否打开文件管理器,摄像头,录音,拍照等功能,打包时将默认加入codrova      插件(可选)

wex5 教程之 图文讲解 文件上传attachmentSimple(1)

wex5 教程之 图文讲解 文件上传attachmentSimple(1)是否压缩

代码逻辑与实现

1  初始化页面,调用源码提供的事件uploader,并监听onFileSelected事件,同时对图片格式进行判断

wex5 教程之 图文讲解 文件上传attachmentSimple(1)

2  图片上传成功,数据库图片字段变化,触发更改事件,用getFileUrl(realFileName,storeFileName,ownerID,operateType)方法,提取图片路径,写入图片路径字段。

案例是图片在解析路径过程中拼接imgUrl,此工程是图片上传后即拼接imgUrl,并写入数据库,前端只需取值即可。同时提取图片名称,用ouoput组件展示当前上传图片名称,以便确认。

wex5 教程之 图文讲解 文件上传attachmentSimple(1)

3 确认,并保存

wex5 教程之 图文讲解 文件上传attachmentSimple(1)