图片和视频上传

最新推荐文章于 2023-05-31 16:41:57 发布

原创最新推荐文章于 2023-05-31 16:41:57 发布 · 325 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript

笔记专栏收录该内容

8 篇文章

订阅专栏

这段内容展示了如何实现图片和视频的上传功能。通过Cupload插件进行图片上传，限制了图片的数量、尺寸和大小。同时，使用filesUpload插件处理视频上传，检查文件大小不超过10MB，并在上传成功后将文件路径保存。

图片上传插件
链接: https://pan.baidu.com/s/1qabI8cxzGXRN79xdbn9FVw
提取码: 23ic
视频上传插件
链接: https://pan.baidu.com/s/1tRLrVtnKi4nIEF7l9owTiA
提取码: be9f

<div class="form-group" id="share1">
            <label class="col-sm-3 control-label">图片：</label>
            <div id="cupload"></div>
</div>
 <input type="hidden" id="sharePics2"/>
 <div class="form-group" id="share2">
            <label class="col-sm-3 control-label">视频：</label>
            <div class="col-sm-8">
                <div class="fileupload"></div>
            </div>
        </div>
<script type="text/javascript">
    var cupload = new Cupload({
        ele: "#cupload",           // 实例化的DOM对象,必需
        name: "image",              // 图片input的name名,非必需,默认为image
        num: 1,                    // 可上传图片的数量,非必需,默认为1
        width: 148,                  // 预览框的宽,单位为px,非必需,默认为148
        height: 148,                  // 预览框的高,单位为px,非必需,默认为148
        maxSize: 10240                 // 图片大小最大限制,单位为KB,非必需,无默认值
        // minWidth        : 100,                  // 图片宽度最小限制,单位为px,非必需,无默认值
        // minHeight       : 100,                  // 图片高度最小限制,单位为px,非必需,无默认值
        // maxWidth        : 2000,                 // 图片宽度最大限制,单位为px,非必需,无默认值
        // maxHeight       : 2000,                 // 图片高度最大限制,单位为px,非必需,无默认值
        // limitedWidth    : 800,                  // 图片宽度要求,单位为px,非必需,无默认值
        // limitedHeight   : 800,                  // 图片高度要求,单位为px,非必需,无默认值
        //minSize         : 128,                 // 图片大小最小限制,单位为KB,非必需,无默认值
    });
</script>
<script>
    $(".fileupload").filesUpload({
        url:prefix+'/upload',//上传地址
        multiple: false,  //是否多文件上传
        accept: 'audio/*, video/*', //input accept属性
        name:'file',
        fileTypes:'3gp,mp3,mp4,mkv',//文件格式
        buttonText: '选择文件',  //按钮文字
        onUploadStart: function() {
            var fileSize = $("#FileUploadSelf")[0].files[0].size/(1024*1024);
            if(fileSize>10){
                $.modal.alertWarning("上传单个文件大小不能超过10MB!");
                return false;
            }else{
                return true;
            }
        }, //请求开始
        onUploadSuccess: function(res) {
            if (JSON.parse(res.response).msg){
                document.getElementById("sharePics2").value=JSON.parse(res.response).msg;
            }else{
                $.modal.alertWarning("上传路径配置错误!");
            }
        },//请求成功
        onUploadComplete: function() {},//请求完成
        onUploadError:function(res, xhr){//请求错误
            console.log(res,xhr)
        }
    })
</script>