admin 管理员组

文章数量: 1087677

jQuery 上传图片或视频 批量上传

样式根据个人需要修改

html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>论坛</title><link href="css/mui.css" rel="stylesheet" /><link rel="stylesheet" href="css/index.css" /><link rel="stylesheet" href="css/upload.css" /></head><body><header class="mui-bar mui-bar-nav"><a class="mui-icon mui-icon-left-nav mui-pull-left" onclick="javascript :history.back(-1);"></a><h1 class="mui-title">论坛</h1><a class="post mui-icon mui-pull-right" href="javascript:void(0)">发布</a></header><div class="mui-content mui-scroll-wrapper forumPublish"><div class="feed-box"><textarea placeholder="你想说的..."></textarea><div class="ad-img"><ul class="sctp"><li><div class="upload-btn"><input type="file" accept="audio/*|video/*|image/*" name="" id=""></div></li></ul></div></div></div><script type="text/javascript" src="js/jquery-3.3.1.min.js"></script><script>var files = [];$(".upload-btn input").on("change", function(e) {var file = this.files[0]; //获取文件var fileType = file.type; //获取文件类型//判断是否是视频文件 0视频 -1图片；if(fileType.search("video") == 0) {var createObjectURL = function(file) {return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](file);};var videoSrc = createObjectURL(file);var videoNew = "<li><video controls='controls'><source src='" + videoSrc + "' ></source></video><em onclick='delect_pic(this,0)'>-</em></li>";var video = document.getElementsByTagName("video");if(video[0] != undefined) {//							如果有视频 新上传的替换掉//							console.log($('video').closest("li"));$('video').closest("li").html("<video controls='controls'><source src='" + videoSrc + "' ></source></video><em onclick='delect_pic(this)'>-</em>");} else {//如果没有上传视频 追加上去$(".sctp").prepend(videoNew);}files.push(videoSrc);} else {var fr = new FileReader();var imgStr;fr.readAsDataURL(file);fr.onload = function(file) {var imgNew = new Image();imgNew.src = file.target.result;imgStr = "<li><img src="+ imgNew.src +" class='pic_look'><em onclick='delect_pic(this,1)'>-</em></div></li>";$(".sctp").prepend(imgStr);files.push(imgNew.src);}}console.log(files);});Array.prototype.remove = function(val) {var index = this.indexOf(val);if(index > -1) {this.splice(index, 1);}};// 删除function delect_pic(item, num) {if(num == 0) {var imgSrc = $(item).siblings("video").children("source")[0].src;console.log(imgSrc);} else {var imgSrc = $(item).siblings(".pic_look")[0].src;console.log(imgSrc);}$(item).parents("li").remove();console.log(imgSrc);files.forEach(function(value, i) {　if(value === imgSrc) {files.remove(imgSrc);}})console.log(files);}</script></body></html>

css

 ul,li,textarea{margin: 0;padding: 0;}.img-full {width: 100%;margin: 0 auto;display: block;}.ad-img {width: 100%;margin: 0 auto;}.ad-img h3 {font-weight: normal;font-size: 1.6rem;margin-bottom: 10px;}.sctp li {position: relative;width: 100px;height: 100px;overflow: hidden;display: inline-block;margin-right: 1rem;vertical-align: top;margin-bottom: 0.5rem;}.sctp li video {position: absolute;transform: translateY(-50%);-webkit-transform: translateY(-50%);top: 50%;left: 0;width: 100%;}.sctp .pic_look {width: 100%;height: 100%;background-size: cover;background-position: center center;background-repeat: no-repeat;}.sctp em {position: absolute;display: inline-block;width: 2rem;height: 2rem;background-color: red;color: #fff;font-size: 27px;right: 0px;top: 0px;text-align: center;line-height: 21px;border-radius: 50%;}.upload-btn {height: 100%;position: relative;display: inline-block;background: url(../images/publish.png) center no-repeat;background-size: 100% 100%;box-sizing: border-box;}.upload-btn input {width: 100%;height: 100%;opacity: 0;}

本文标签： jQuery 上传图片或视频 批量上传

版权声明：本文标题：jQuery 上传图片或视频 批量上传 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1700371352a417945.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。