layui上传图片视频文件

//普通图片上传
//默认是图片
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();
        });
    }
});

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Layui是一个简洁易用的前端开发框架,可以帮助我们快速开发出美观、响应式的网页界面。在Layui中,通过使用其自带的上传组件,我们可以方便地实现文件的上传功能。 在Layui中同时上传三个文件,可以按照以下步骤进行操作: 1. 引入Layui的上传组件相关代码。在HTML文件中,我们需要引入相应的Layui的CSS和JavaScript文件,同时也需要引入Layui的上传组件的CSS和JavaScript文件。 2. 创建上传按钮。可以在HTML文件中创建一个按钮元素,用于触发上传文件的操作。 3. 定义上传组件配置项。在JavaScript文件中,我们可以使用Layuiupload模块来创建一个上传组件,并定义相关的配置项。具体的配置项包括上传的接口地址、上传方式、文件类型等。 4. 监听上传事件。通过监听上传按钮的点击事件,我们可以在触发时执行上传操作。在上传的过程中,可以通过监听不同的上传事件,如上传进度、上传成功等事件,来实现相应的操作。 5. 处理上传的文件。在上传成功的回调函数中,可以获取到上传的文件信息,然后进行进一步的处理。如果需要将上传的文件保存到服务器端,可以将文件信息发送到服务器端进行处理。 总结而言,使用Layui的上传组件,在HTML中引入相关代码,创建上传按钮,配置上传组件参数,并监听上传事件,可以实现同时上传三个文件的功能。具体的实现细节可以参考Layui官方文档中关于上传组件的使用说明。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值