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

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

首先引入插件的JS

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>

        

          
        
        
        

          

          AI 代码解读
        
      
      

其中up方法：

11.jpg

上传

上传按钮：

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

        

          
        
        
        

          

          AI 代码解读
        
      
      

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

QQ图片20170607224129.png

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

9.png

QQ截图20170607224543.jpg

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

10.jpg

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