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' &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

> 例

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' &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样式分别控制不能上传、删除

代码示例:

$('.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))()}
1
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