attachmentSimple组件，附件组件

目录

一、综述
二、DOM结构
三、样式
四、属性
五、方法
六、事件
七、操作
八、案例

一. 综述

attachmentSimple组件，附件组件，可实现拍照、录像、录音后上传，选择已有图片或文件上传，以及查看已上传的文件。

组件路径：$UI/system/components/justep/attachment/

组件标识：UI2/system/components/justep/attachment/attachmentSimple

二. DOM结构

  • 典型dom结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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' &amp;&amp;
        $attachmentItems.get().length &gt; 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

> 例

1
2
3
4
5
6
7
8
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方法，先添加一条数据

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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' &amp;&amp;
        $attachmentItems.get().length &gt; 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样式分别控制不能上传、删除

代码示例：

1
2
$('.x-item-upload').addClass('x-upload-hide');//隐藏上传
$('.x-item-remove').addClass('x-upload-hide'); //隐藏删除
1
2
3
4
5
.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))()}
1
3、控制上传文件类型
  • 增加attachmentSimple组件
  • 在model的onLoad事件中写js控制上传文件类型，有两种方式：

代码示例：

（1）通过获取文件类型来判断；

1
2
3
4
5
6
7
8
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）获取文件的扩展名来判断；

1
2
3
4
5
6
7
8
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控制上传文件大小

代码示例：

1
2
3
4
5
6
7
8
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控制上传文件个数

代码示例：

1
2
3
4
5
6
7
8
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