jQuery EasyUI/TopJUI上传多个附件并可以进行删除操作

jQuery EasyUI/TopJUI上传多个附件并可以进行删除操作

html

<table data-toggle="topjui-datagrid"
       data-options="id:'productDg',
       url:'../../json/datagrid/product-list.json'">
    <thead>
    <tr>
        <th data-options="field:'id',title:'ID',checkbox:true"></th>
        <th data-options="field:'name',title:'商品名称'"></th>
        <th data-options="field:'code',title:'商品编号'"></th>
        <th data-options="field:'spec',title:'规格型号'"></th>
        <th data-options="field:'danwei',title:'规格型号'"></th>
        <th data-options="field:'sale_price',title:'销售单价'"></th>
    </tr>
    </thead>
</table>

<!-- 用户 表格工具栏 -->
<div id="productDg-toolbar" class="topjui-toolbar"
     data-options="grid:{
           type:'datagrid',
           id:'productDg'
       }">
    <!--<a href="javascript:void(0)"
       data-toggle="topjui-uploader"
       data-options="iconCls:'fa fa-check-circle',
       btnCls:'topjui-btn-brown',
       parentGrid:{
           type:'datagrid',
           id:'productDg',
           unselectedMsg:'请先选中要上传附件的数据！'
       }">webUploader上传</a>-->
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="method:'upload',
       extend:'#productDg-toolbar',
       iconCls:'fa fa-cloud-upload',
       btnCls:'topjui-btn-green',
       accept:'file',
       dialog:{
           title:'附件批量上传'
       },
       parentGrid:{type:'datagrid', id:'productDg'},
       uploadUrl:_ctx + '/json/response/upload.json?uuid={uuid}'">批量上传</a>
</div>

　　页面效果展示

　

　选择文件

 

　　

 

开始上传

 

 

   　　注意：目前批量上传控件必须要有Grid的界面才能使用，上传文件界面是以弹窗的形式展示。

 

EasyUI中文网：http://www.jeasyui.cn

TopJUI前端框架：http://www.topjui.com

TopJUI交流社区：http://ask.topjui.com