layui上传图片视频文件

SDJN_ONE

已于 2023-11-14 23:09:32 修改

阅读量1.8k

点赞数

分类专栏： layui 文章标签： html

于 2021-02-21 14:34:45 首次发布

本文链接：https://blog.youkuaiyun.com/SDJN_ONE/article/details/113917835

版权

layui 专栏收录该内容

10 篇文章

订阅专栏

该段代码展示了如何使用layui的上传组件来上传视频和PDF文件。通过配置不同的参数，如url、accept和exts，可以指定上传的文件类型。在上传过程中，提供了before回调函数进行预览，done回调函数处理成功响应，以及error回调函数处理上传失败的情况，并支持重试功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//普通图片上传
//默认是图片
var uploadInst = upload.render({
    elem: '#upload_tpdz'
    ,url: '${pageContext.request.contextPath}/common/upload/alioss/video'
    // ,field:"layuiVideo"
    // ,data:{"dir":"media"}
    // ,accept: 'video'//视频
    //,accept: 'file'//pdf文件
    //,exts: 'pdf'//pdf文件
    ,before: function(obj){
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
            $('#show_tpdz').attr('src', result); //图片链接（base64）
        });
    }
    ,done: function(res){
        $("#url").val(res.retData.url);
        // $("#logo_address").val(res.data.file_path);

        // console.info(res);
        //上传成功
    }
    ,error: function(){
        //演示失败状态，并实现重传
        var errorText = $('#errorText');
        errorText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
        errorText.find('.demo-reload').on('click', function(){
            uploadInst.upload();
        });
    }
});