TP5视频上传,商城增加视频上传功能-阿里云开发者社区

开发者社区> 开发与运维> 正文

TP5视频上传,商城增加视频上传功能

简介: 开发用的newshop商城,需要做个视频上传的功能,下载了文件上传的插件 首先引入插件的JS 6.png 然后在需要添加的html页面加上标签 视频上传: 接下来在这面下方写JS $(fu...

开发用的newshop商城,需要做个视频上传的功能,下载了文件上传的插件

首先引入插件的JS

img_f0131b9ff987b75881f77bb650c6fe27.png
6.png

然后在需要添加的html页面加上标签

<div class = "control-group">
  <label class="control-label" for="file">视频上传:</label>
  <div id="zyupload" class="zyupload"></div>  
</div>
接下来在这面下方写JS

<script type="text/javascript">
            $(function(){
                // 初始化插件
                $("#zyupload").zyUpload({
                    width            :   "450px",                 // 宽度
                    height           :   "50px",                 // 宽度
                    itemWidth        :   "140px",                 // 文件项的宽度
                    itemHeight       :   "115px",                 // 文件项的高度
                    url              :   "up",              // 上传文件的路径
                    fileType         :   ["jpg","png","txt","js","mp4"],// 上传文件的类型
                    fileSize         :   9999999999,                // 上传文件的大小
                    multiple         :   false,                    // 是否可以多个文件上传
                    dragDrop         :   false,                    // 是否可以拖动上传文件
                    tailor           :   false,                    // 是否可以裁剪图片
                    del              :   true,                    // 是否可以删除文件
                    finishDel        :   true,                    // 是否在上传文件完成后删除预览
                    /* 外部获得的回调接口 */
                    onSelect: function(selectFiles, allFiles){    // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
                        //console.info("当前选择了以下文件:");
                        //console.info(selectFiles);
                    },
                    onDelete: function(file, files){              // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
                        console.info("当前删除了此文件:");
                        console.info(file.name);
                    },
                    onSuccess: function(file, response){          // 文件上传成功的回调方法
                        //console.info("此文件上传成功:");
                        //console.info(file.name);
                        //console.info("此文件上传到服务器地址:");
                        //console.info(response);
                        //$("#uploadInf").append("<p>上传成功,文件地址是:" + response + "</p>");
                        //
                        $('[name=video]').val(response);
                    },
                    onFailure: function(file, response){          // 文件上传失败的回调方法
                        console.info("此文件上传失败:");
                        console.info(file.name);
                    },
                    onComplete: function(response){               // 上传完成的回调方法
                        console.info("文件上传完成");
                        console.info(response);
                    }
                });
            });
        </script>

其中up方法:

img_b453daf56e4ce2c88f39aa19b054da30.jpe
11.jpg

上传

上传按钮:

 <button class="btn btn-info" id="btnSave" type="button" onClick="SubmitProductInfo(0,'ADMIN_MAIN','SHOP_MAIN')">保存</button>

onClick的方法是SubmitProductInfo,所以在JS中找到这个方法,

img_aa65c6bec09d9541c611bc9bf1460719.png
QQ图片20170607224129.png

接来下找到红框的方法,那是获取添加的所有信息,把添加的视频获取的信息获取到:

img_8975e4413c8bdde29b678dd81dc307b8.png
9.png
img_3269114d942550c225e364219bf28514.jpe
QQ截图20170607224543.jpg

找到Ajax的url对应的方法,在里面添加上视频的信息:

img_8bc1fd69504d0add9fa215e16fa4474b.jpe
10.jpg

注:代码和图中有些是没有加验证的,项目后期已经加上了,这些只是调试用。

版权声明:本文首发在云栖社区,遵循云栖社区版权声明:本文内容由互联网用户自发贡献,版权归用户作者所有,云栖社区不为本文内容承担相关法律责任。云栖社区已升级为阿里云开发者社区。如果您发现本文中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,阿里云开发者社区将协助删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章