APP上传附件问题

wangjb

我现在使用的版本是WX53.7

我最近在做一个APP，用的是WX53.7版本，有一个功能是实现附件上传，我呢也对 attachmentSimple  组件做了好几天的研究，就想把上传后的文件的显示模式改一改，就是不知道怎样改，

客户要求的附件上传后的展示效果大概如下图：
      
点击  附件图标按钮，打开文档然后选择文件后，所有上传的文件列表显示：第一列是缩略图，非图片显示文档类型图标， 第二列是文档名字，第三列是删除按钮，第四列是下载按钮，
点击删除按钮删除上传的文件，点击下载按钮下载文件到本地，点击文件名时可以预览文档。




我看咱们的    attachmentSimple   组件功能都有，







就是在展现形式上不符合用户需求，如何将   attachmentSimple   组件上传后文件的展现形式改成用户的需求呢，青高手指点，跪等！！

jishuang

列表展现参考

1. <div component="$UI/system/components/justep/attachment/attachmentSimple"
   
2.                             actionUrl="$UI/system/service/doc/common/simpleFileStore.j"
   
3.                             xid="attachmentSimple4" bind-ref="$model.mainData.ref("fFJ")">
   
4.                             <div class="x-attachment" xid="div48">
   
5.                               <div class="x-attachment-content x-card-border"
   
6.                                 xid="div49">
   
7.                                 <div class="x-doc-process" xid="div50">
   
8.                                   <div class="progress-bar x-doc-process-bar"
   
9.                                     role="progressbar" style="width:0%;" xid="progressBar4"/>
   
10.                                 </div>  
    
11.                                 <table>
    
12.                                   <tr>
    
13.                                     <td style="padding:8px;">附件</td>  
    
14.                                     <td>
    
15.                                       <div class="x-attachment-cell" data-bind="visible:$state.get() == 'upload'"
    
16.                                         xid="div54">
    
17.                                         <div class="x-attachment-item x-item-upload"
    
18.                                           data-bind="visible:$state.get() == 'upload'"
    
19.                                           xid="div55"/>
    
20.                                       </div>
    
21.                                     </td>
    
22.                                   </tr>
    
23.                                 </table>  
    
24.                                 <table class="x-attachment-list">
    
25.                                   <tbody data-bind="foreach:$attachmentItems">
    
26.                                     <tr>
    
27.                                       <td style="width:50px;padding:5px;">
    
28.                                         <div style="width:30px;height:30px;background-size:32px;"
    
29.                                           data-bind="style:{backgroundImage:($model.previewPicture.bind($model,$object))()}"/>
    
30.                                       </td>  
    
31.                                       <td style="vertical-align:middle;padding:5px;">
    
32.                                         <span data-bind="click:$model.getModel().attPreview.bind($model.getModel(),$model,$object),text:$object.realFileName.get()"/>
    
33.                                       </td>  
    
34.                                       <td style="width:50px;padding:5px;">
    
35.                                         <span class="glyphicon glyphicon-remove"
    
36.                                           data-bind="click:$model.deleteFile.bind($model)"/>
    
37.                                       </td>  
    
38.                                       <td style="width:50px;padding:5px;">
    
39.                                         <span class="glyphicon glyphicon-arrow-down"
    
40.                                           data-bind="click:$model.getModel().attDownload.bind($model.getModel(),$model,$object)"/>
    
41.                                       </td>
    
42.                                     </tr>
    
43.                                   </tbody>
    
44.                                 </table>
    
45.                               </div>
    
46.                             </div>
    
47.                           </div>

复制代码

其中点文件名查看和点下载按钮下载调用的方法是在自己的js文件中定义的，如下：

1.         Model.prototype.attPreview = function(object, event) {
   
2.                 var realFileName = event.realFileName.get();
   
3.                 var storeFileName = event.storeFileName.get();
   
4.                 var ownerID = object.getOwnerID();
   
5.                 var url = object.getFileUrl(realFileName,storeFileName,ownerID,"browse");
   
6.         fileApi.browse(url);
   
7.         };
   
8.         Model.prototype.attDownload = function(object, event) {
   
9.                 var realFileName = event.realFileName.get();
   
10.                 var storeFileName = event.storeFileName.get();
    
11.                 var ownerID = object.getOwnerID();
    
12.                 var url = object.getFileUrl(realFileName,storeFileName,ownerID,"download");
    
13.         fileApi.browse(url);
    
14.         };

复制代码

展现效果如下：