<input type="file" accept="image/*;capture=camera" class="input">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>移动端上传图片/视频</title>
<style>
/* reset*/
*{margin:0;padding:0;box-sizing:border-box;-webkit-appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
*:focus{outline:none;}
html{-webkit-text-size-adjust:none;}
html, body{font-size:62.5%;}
body{max-width:640px;margin:0 auto;box-sizing:border-box;color:#525151;font-family:'Microsoft Yahei';font-size:1.6rem;}
input, textarea{font-size:1.6rem;color:#525151;font-family:'Microsoft Yahei';}
*:focus{outline:none;}
ul, li{list-style:none;}
img{border:none;}
a{text-decoration:none;}
/*图片全屏*/.img-full{width:100%;margin:0 auto;display:block;}
.ad-img{width:90%;margin:0 auto;padding: 20px;}
.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;
border: 1px solid #dbdbdb;
margin-right:0.3rem;
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: 25px;
height: 25px;
background-color: red;
color: #fff;
font-size: 18px;
right: 5px;
top: 5px;
text-align: center;
line-height: 22px;
border-radius: 50%;
font-weight: 700
}
.upload-btn {
height:100%;
position: relative;
display: inline-block;
background-image: url(images/add.png);
box-sizing: border-box;
background-size: 30px 30px;
background-position: center center;
background-repeat: no-repeat;
}
.upload-btn input {width: 100%;height: 100%;opacity: 0;}
</style>
</head>
<body>
<div class="ad-img">
<h3>移动端上传图片/视频</h3>
<ul class="sctp mt15">
<li><div class="upload-btn"><input type="file" accept="image/*,video/*" name="" id=""></div>
</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function(){
$(".upload-btn input").on("change", function () {
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)'>-</em></li>";
$(".sctp").prepend(videoNew);
}else{
var fr = new FileReader();
var imgStr;
fr.readAsDataURL(file);
fr.onload = function(file){
var imgNew = new Image();
imgNew.src = file.target.result;
console.log(imgNew.src);
imgStr = "<li><div class='pic_look' style='background-image: url("+ imgNew.src + ")'><em onclick='delect_pic(this)'>-</em></div></li>";
$(".sctp").prepend(imgStr);
console.log(imgStr);
}
}
});
})
// 删除
function delect_pic(item){
$(item).parents("li").remove();
}
</script>
</body>
</html>
经测试 谷歌浏览器上上传过的视频再次上传不了,手机上无此问题。 苹果手机浏览器 视频只支持播放一次,而且没有默认图片