开发用的newshop商城,需要做个视频上传的功能,下载了文件上传的插件
首先引入插件的JS
![4424012-121efc8d2b444c38.png](https://i-blog.csdnimg.cn/blog_migrate/12e2e5872e7721b650c92c0a5e655c7a.webp?x-image-process=image/format,png)
6.png
然后在需要添加的html页面加上标签
<div class = "control-group"> <label class="control-label" for="file">视频上传:</label> <div id="zyupload" class="zyupload"></div> </div>
接下来在这面下方写JS
$(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方法:
![4424012-9bae85b999f16155.jpg](https://i-blog.csdnimg.cn/blog_migrate/d0c7385b81e3c8c372c46fd45f300f2d.webp?x-image-process=image/format,png)
11.jpg
上传
上传按钮:
<button class="btn btn-info" id="btnSave" type="button" onClick="SubmitProductInfo(0,'ADMIN_MAIN','SHOP_MAIN')">保存</button>
onClick的方法是SubmitProductInfo
,所以在JS中找到这个方法,
![4424012-75e727ec24fb0d47.png](https://i-blog.csdnimg.cn/blog_migrate/9a5d62ed4e1251554cb07a4394bb1aad.webp?x-image-process=image/format,png)
QQ图片20170607224129.png
接来下找到红框的方法,那是获取添加的所有信息,把添加的视频获取的信息获取到:
![4424012-a13a326845edacdc.png](https://i-blog.csdnimg.cn/blog_migrate/0e08a656e0318d15a46f769b7978df26.webp?x-image-process=image/format,png)
9.png
![4424012-75312d326eabc5ff.jpg](https://i-blog.csdnimg.cn/blog_migrate/cddd802a1e7591562d6614fe9d0ebe99.webp?x-image-process=image/format,png)
QQ截图20170607224543.jpg
找到Ajax的url对应的方法,在里面添加上视频的信息:
![4424012-14610f351c46a004.jpg](https://i-blog.csdnimg.cn/blog_migrate/309fce2050c850e9a663ecc27580ba2e.webp?x-image-process=image/format,png)
10.jpg
注:代码和图中有些是没有加验证的,项目后期已经加上了,这些只是调试用。