開發(fā)用的newshop商城，需要做個視頻上傳的功能，下載了文件上傳的插件

首先引入插件的JS

6.png

然后在需要添加的html頁面加上標(biāo)簽

<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",                 // 文件項(xiàng)的寬度
                    itemHeight       :   "115px",                 // 文件項(xiàng)的高度
                    url              :   "up",              // 上傳文件的路徑
                    fileType         :   ["jpg","png","txt","js","mp4"],// 上傳文件的類型
                    fileSize         :   9999999999,                // 上傳文件的大小
                    multiple         :   false,                    // 是否可以多個文件上傳
                    dragDrop         :   false,                    // 是否可以拖動上傳文件
                    tailor           :   false,                    // 是否可以裁剪圖片
                    del              :   true,                    // 是否可以刪除文件
                    finishDel        :   true,                    // 是否在上傳文件完成后刪除預(yù)覽
                    /* 外部獲得的回調(diào)接口 */
                    onSelect: function(selectFiles, allFiles){    // 選擇文件的回調(diào)方法  selectFile:當(dāng)前選中的文件  allFiles:還沒上傳的全部文件
                        //console.info("當(dāng)前選擇了以下文件：");
                        //console.info(selectFiles);
                    },
                    onDelete: function(file, files){              // 刪除一個文件的回調(diào)方法 file:當(dāng)前刪除的文件  files:刪除之后的文件
                        console.info("當(dāng)前刪除了此文件：");
                        console.info(file.name);
                    },
                    onSuccess: function(file, response){          // 文件上傳成功的回調(diào)方法
                        //console.info("此文件上傳成功：");
                        //console.info(file.name);
                        //console.info("此文件上傳到服務(wù)器地址：");
                        //console.info(response);
                        //$("#uploadInf").append("<p>上傳成功，文件地址是：" + response + "</p>");
                        //
                        $('[name=video]').val(response);
                    },
                    onFailure: function(file, response){          // 文件上傳失敗的回調(diào)方法
                        console.info("此文件上傳失?。?);
                        console.info(file.name);
                    },
                    onComplete: function(response){               // 上傳完成的回調(diào)方法
                        console.info("文件上傳完成");
                        console.info(response);
                    }
                });
            });
        </script>

其中up方法：

11.jpg

上傳

上傳按鈕：

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

onClick的方法是SubmitProductInfo，所以在JS中找到這個方法，

QQ圖片20170607224129.png

接來下找到紅框的方法，那是獲取添加的所有信息，把添加的視頻獲取的信息獲取到：

9.png

QQ截圖20170607224543.jpg

找到Ajax的url對應(yīng)的方法，在里面添加上視頻的信息：

10.jpg

注：代碼和圖中有些是沒有加驗(yàn)證的，項(xiàng)目后期已經(jīng)加上了，這些只是調(diào)試用。