勾股OA在线文档

勾股OA5.0前端上传组件【uploadPlus】调用方法集

uploadPlus主要是勾股系统前端上传文件的重要组件，掌握了uploadPlus组件的使用，可以大大提高开发者开发功能的效率，只需要简单配置参数，即可完成，文件上传、单图上传、多图上传、大文件分片上传、Excel文件导入上传等。

下面是内置的方法：

1、常规调用附件上传

        <tr>
            <td class="layui-td-gray">
                <div class="layui-input-inline">附件</div>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn layui-btn-xs" id="uploadBtn">上传</button>
                </div>
            </td>
            <td colspan="5" style="line-height:inherit">
                <div class="layui-row" id="uploadBox">
                    <input type="hidden" data-type="file" name="file_ids" value="">
                </div>
            </td>
        </tr>

var attachment = new uploadPlus({
    "title":'上传文件',
    "target":'uploadBtn',
    "targetBox":'uploadBox'
});

2、单文件上传等。

const moduleInit = ['tool','uploadPlus'];
    function gouguInit() {
        var form = layui.form,tool=layui.tool,uploadPlus=layui.uploadPlus;

        //单图上传
        var photoUpload = new uploadPlus({
            'use':'single',
            'target':'uploadImg',
            'callback':function(res){
                layer.msg(res.msg);
                if (res.code == 0) {
                    //上传成功
                    $('#uploadThumb input').attr('value', res.data.filepath);
                    $('#uploadThumb img').attr('src', res.data.filepath);
                }
            }
        });
    }

3、附件上传,同时进行Ajax回调保存

        <tr>
            <td class="layui-td-gray">
                <div class="layui-input-inline">附件</div>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn layui-btn-xs" id="uploadBtn">上传</button>
                </div>
            </td>
            <td colspan="5" style="line-height:inherit">
                <div class="layui-row" id="uploadBox">

                </div>
            </td>
        </tr>

        var attachment = new uploadPlus({
            "title":'上传文件',
            "target":'uploadBtn',
            "targetBox":'uploadBox',
            "attachment":{
                "type":1,//0ajax多文件模式，1ajax单文件单记录模式
                "uidDelete":true,//是否开启只有上传人自己才能删除自己的附件
                "ajaxSave":function(res){
                    $.ajax({
                        url: "/customer/api/add_file",
                        type:'post',
                        data:{
                            'customer_id':customer_id,
                            'file_id':res.data.id,
                            'file_name':res.data.name
                        },
                        success: function (e) {
                            layer.msg(e.msg);
                            if (e.code == 0) {
                                setTimeout(function(){
                                    location.reload();
                                },1000)                            
                            }
                        }
                    })
                },
                "ajaxDelete":function(file_id){
                    let callback = function (e) {
                        layer.msg(e.msg);
                        if (e.code == 0) {                        
                            $('#file_' + file_id).remove();
                        }
                    }
                    tool.delete("/customer/api/delete_file", {id: file_id}, callback);
                }
            }
        })