attachmentSimple组件，附件组件
目录
一、综述
二、DOM结构
三、样式
四、属性
五、方法
六、事件
七、操作
八、案例
一. 综述
attachmentSimple组件，附件组件，可实现拍照、录像、录音后上传，选择已有图片或文件上传，以及查看已上传的文件。
组件路径：$UI/system/components/justep/attachment/
组件标识：UI2/system/components/justep/attachment/attachmentSimple
二. DOM结构
- 典型dom结构
<div component="$UI/system/components/justep/attachment/attachmentSimple"
xid="attachmentSimple1">
<div class="x-attachment" xid="div4">
<div class="x-attachment-content x-card-border" xid="div5">
<div class="x-doc-process" xid="div6">
<div class="progress-bar x-doc-process-bar" role="progressbar"
style="width:0%;" xid="div7"/>
</div>
<div data-bind="foreach:$attachmentItems" xid="div8">
<div class="x-attachment-cell" xid="div9">
<div class="x-attachment-item x-item-other"
data-bind="click:$model.previewOrRemoveItem.bind($model),
style:{backgroundImage:($model.previewPicture.bind($model,$object))()}"
xid="div10">
<a data-bind="visible:$model.$state.get() == 'remove'"
class="x-remove-barget"
xid="a1"/>
</div>
</div>
</div>
<div class="x-attachment-cell"
data-bind="visible:$state.get() == 'upload'"
xid="div11">
<div class="x-attachment-item x-item-upload"
data-bind="visible:$state.get() == 'upload'"
xid="div12"/>
</div>
<div class="x-attachment-cell"
data-bind="visible:$state.get() == 'upload' &&
$attachmentItems.get().length > 0"
xid="div13">
<div class="x-attachment-item x-item-remove"
data-bind="click:changeState.bind($object,'remove')"
xid="div14"/>
</div>
<div style="clear:both;" xid="div15"/>
</div>
</div>
</div>
三. 样式
- （无）
四. 属性
组件具有公共属性，请参考组件公共属性
- bind-ref
关联data组件中的列，将附件组件中的文件信息以json数组格式存入该列
- xid
[string][xid] 组件标示
五. 方法
组件具有公共方法，请参考组件公共方法
- getFileUrl
String getFileUrl(string realFileName,string storeFileName,string ownerID,string operateType)
获取下载、浏览的url
> 参数
realFileName：[String] 上传文件的真正文件名
storeFileName：[String] 存储文件的名字
ownerID：[String] 所属ID
operateType：[String] 操作类型，取值范围：browse 获取浏览的url，download 获取下载的url
> 返回值
String
> 例
var row=this.comp("data").getCurrentRow();
var jsonList = eval("(" + row.val('fFile') + ")");
var ownerID = row.getID();
var realFileName = jsonList[0]["realFileName"];
var storeFileName = jsonList[0]["storeFileName"];
var operateType = "browse";
var url=this.comp("attachmentSimple1").getFileUrl(realFileName,storeFileName
,ownerID,operateType);
六. 事件
- (无)
七. 操作
- (无)
八. 案例
1、文件上传下载
- 增加attachmentSimple组件和data组件
- 设置attachmentSimple组件的bind-ref属性，如：data.ref(‘fFile’)
- data中至少有一条数据时，才能使用，没有数据可以调用newData方法，先添加一条数据
代码示例：
<div component="$UI/system/components/justep/attachment/attachmentSimple"
xid="attachmentSimple1" bind-ref="data.ref('fFile')">
<div class="x-attachment" xid="div4">
<div class="x-attachment-content x-card-border" xid="div5">
<div class="x-doc-process" xid="div6">
<div class="progress-bar x-doc-process-bar" role="progressbar"
style="width:0%;" xid="div7"/>
</div>
<div data-bind="foreach:$attachmentItems" xid="div8">
<div class="x-attachment-cell" xid="div9">
<div class="x-attachment-item x-item-other"
data-bind="click:$model.previewOrRemoveItem.bind($model),
style:{backgroundImage:($model.previewPicture.bind($model,$object))()}"
xid="div10">
<a data-bind="visible:$model.$state.get() == 'remove'"
class="x-remove-barget"
xid="a1"/>
</div>
</div>
</div>
<div class="x-attachment-cell"
data-bind="visible:$state.get() == 'upload'"
xid="div11">
<div class="x-attachment-item x-item-upload"
data-bind="visible:$state.get() == 'upload'"
xid="div12"/>
</div>
<div class="x-attachment-cell"
data-bind="visible:$state.get() == 'upload' &&
$attachmentItems.get().length > 0"
xid="div13">
<div class="x-attachment-item x-item-remove"
data-bind="click:changeState.bind($object,'remove')"
xid="div14"/>
</div>
<div style="clear:both;" xid="div15"/>
</div>
</div>
</div>
2、控制不能上传、删除、下载
- 增加attachmentSimple组件
- 写css样式分别控制不能上传、删除
代码示例：
$('.x-item-upload').addClass('x-upload-hide');//隐藏上传
$('.x-item-remove').addClass('x-upload-hide'); //隐藏删除
.x-upload-hide {
margin: 0 !important;
width: 0 !important;
height: 0 !important;
}
- 控制不能下载：修改组件中x-attachment-item x-item-other的data-bind属性为style:{backgroundImage:($model.previewPicture.bind($model,$object))()}
3、控制上传文件类型
- 增加attachmentSimple组件
- 在model的onLoad事件中写js控制上传文件类型，有两种方式：
代码示例：
（1）通过获取文件类型来判断；
var data=this.comp("data");
var uploader = this.comp("attachmentSimple1").uploader;
uploader.on('onFileSelected',function(event){
if(event.file.type.indexOf("image/")<0){
alert("只能上传图片:jpg、png、gif");
event.cancel = true;
}
});
（2）获取文件的扩展名来判断；
var data=this.comp("data");
var uploader = this.comp("attachmentSimple1").uploader;
uploader.on('onFileSelected',function(event){
if (event.file.name.split(".")[1] != "jpg") {
alert("只能上传jpg图片");
event.cancel = true;
}
});
4、控制上传文件大小
- 增加attachmentSimple组件
- 在model的onLoad事件中写js控制上传文件大小
代码示例：
var data=this.comp("data");
var uploader = this.comp("attachmentSimple1").uploader;
uploader.on('onFileSelected',function(event){
if(event.file.size>614400){
alert("上传的文件大小不能超过600KB");
event.cancel = true;
}
});
5、控制上传文件个数
- 增加attachmentSimple组件
- 在model的onLoad事件中写js控制上传文件个数
代码示例：
var data=this.comp("data");
var uploader = this.comp("attachmentSimple1").uploader;
uploader.on('onFileSelected',function(event){
if($.parseJSON(data.getValue("fFile")).length>=2){
alert("只能上传2个文件");
event.cancel = true;
}
});
本文由WeX5君整理，WeX5一款开源免费的html5开发工具，H5 App开发就用WeX5!
阅读其他app 开发相关文章：http://doc.wex5.com/?p=3443
默认点击图片是下载，如果想修改为点击图片是预览，如何实现？
写的根本看不懂 写的人自己能看懂吗？
写的人看不懂，那他写的这么多是怎么写出来的？
绑定data组件后，如果有多行记录，以上代码仅能控制第一行。我想是因为：尽管我只添加了一个attachmentSimple组件，但由于绑定了data控件，当有多行数据时，会自动生成多个attachmentSimple组件与每行数据对应。我测试时每行attachmentSimple组件都能上传文件、删除文件，但除第一行外，其余行不能控制上传图片类型、大小、数量。是不是因为自动生成的attachmentSimple组件ID不一样，因此才会出现这种情况。这要如何解决呢？