H-ui模板文件上传和下载 框架说明

lake 2018-2-23 1912

 文件上传:

1:在form表单中,加入div框并设置一个id以及一个隐藏的input的框,其中前一个用于选择文件以及显示文件名,后一个用于存储文件ID。

2:在js的加载方法中初始化文件上传组件

3:提交时,取隐藏input框的值存入数据库。

举例:

form表单内:

<div class="formControls col-xs-3 col-sm-3">
	<div id="fileId1"></div>    
	<input type="hidden" name="imgFile1" id="imgFile">       
</div>

JS初始化:

$("#fileId1").rayImgUpload("imgFile1");
$("#fileId").rayFileUpload("imgFile");

注意:如果上传的是图片使用rayImgUpload,上传的是文件使用rayFileUpload

如果在上传文件后,需要需要显示一个后台文件,则需要增加一个fileid的参数:

   $('#articleUpload').rayImgUpload('remark','fileid');

如果在上传文件后,需要立即执行一段JS,则需要增加一个回调函数的参数:

   $('#articleUpload').rayImgUpload('remark',"",'callback');

如果在上传文件后,需要触发系统的文件上传监听事件,则需要增加一个事件触发参数:

 $('#articleUpload').rayImgUpload('remark','','','Y');

说明:

articleUpload:文件选择框
defaultImgId: 默认显示上传的附件。
remark:       保存文件上传后的附件ID用于存储在数据,之后会根据这个ID下载文件。
callback:      回调函数方法名
Y:             设为Y则触发事件,不写或者其他值,则不触发

* 文件下载:

下载的URL为:${ctx}/file/download?fileId= 参数为fileId

表现形式:

<a href=“${ctx}/file/download?fileId=${data.fileId}” target=“_blank”>下载</a>
<a href=“${ctx}/file/download?fileId=${data.fileId}” target=“_blank”>${fns:getFileOrigName(data.fileId)}</a>

说明:

第一种是显示“下载”两字,点击进行下载,推荐使用该方式 第二种是显示原始文件名,点击进行下载

* 图片直接显示:

图片等文件需要直接在页面显示的,可以用${fns:getFileById(data.fileId)}获取其文件整体路径后,在页面显示。

例如:   

<img src="${ctx}/file/showImg?fileId=${data.fileId}"/>


最后于 2019-1-10 被lake编辑 ,原因:
最新回复 (0)
全部楼主
返回