JS实现图片的选择并预览，并且能删除
Posted 乐得逍遥
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实现图片的选择并预览，并且能删除相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>评价</title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
<link rel="stylesheet" href="css/evaluate.css">
<script src="js/flexible.debug.js"></script>
<script src="js/flexible_css.debug.js"></script>
<script src="js/vue.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/exif.js"></script>
</head>
<body>
<div class="app">
<div class="tit">
<div class="titL fl">
<img src="img/img3.jpg">
</div>
<div class="titR fl">
<p>
湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣
湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣
</p>
</div>
</div>
<div class="ping">
<p class="p_tit">请填写您的评价内容</p>
<div class="ly ly2">
<textarea name="" id="textareaVal" cols="" rows="" placeholder="分享您的使用心得" maxlength="120"></textarea>
<span><em class="text_num">0</em>/120</span>
</div>
<div class="img_group">
<p class="img_tit">上传图片</p>
<div class="img_list del-wrapper">
<!--<div class="img_item">
<img src="img/img3.jpg">
<i class="del"></i>
</div>-->
<div class="img_item openImg">
<img src="img/add_photos.png">
</div>
</div>
</div>
<div class="btn_div">
<button class="btn">提交评价</button>
</div>
</div>
<div class="mo" style="display: none;"></div>
<div class="fot" style="display: none;">
<div class="fot_item">
<button class="a">拍摄</button>
<input type="file" accept="image/*" capture="camera" id="image" onchange="showPicture(this,\'image\');"><!--针对手机上的摄像头进行调用，在PC使用会非常慢-->
<!--<input type="file" id="image" onchange="showPicture(this,\'image\');">-->
</div>
<div class="fot_item">
<button class="b">从相册选择</button>
<input type="file" id="image2" onchange="showPicture(this,\'image2\');">
</div>
<div class="fot_item">
<button class="c">取消</button>
</div>
</div>
<div class="success" style="display: none;">评价成功</div>
</div>
<script>
$(function(){
//选择图片并预览
var num=0;
var imgArr=[];
function showPicture(imgFile,obj){
var _img=document.getElementById(obj);
var img_area=document.getElementById("img_area");
//获得图片的大小 MB
var f = _img.files;
var imgSize=f[0].size/1024/1024;
var m=Math.floor(imgSize* 100) / 100;
if(m<=5){
imgType();
}
else{
alert(\'图片大小不能超过5MB\');
}
//获得图片的类型
function imgType(){
var filePath =_img.value;
var type = filePath.substring(filePath.lastIndexOf(".")+1).toLowerCase();
switch (type){
case "jpg":
base();
break;
case "jpeg":
base();
break;
case "gif":
base();
break;
case "png":
base();
break;
default:
alert(\'请传入正确的的图片格式!\');
break;
}
}
//图片的base64
function base(){
var _img64_=imgFile.files[0];
var reader = new FileReader();
reader.readAsDataURL(_img64_);
reader.onload = function(e){
var orientation = null;
//获取照片方向角属性，用户旋转控制
EXIF.getData(imgFile,function () {
EXIF.getAllTags(this);
orientation = EXIF.getTag(this, \'Orientation\');
console.log("Orientation:" + orientation); // 拍照方向
});
var dataURL = reader.result;
var imaged = new Image();
imaged.src = dataURL;
imaged.onload = function () {
var canvas = document.createElement(\'canvas\');
var ctx = canvas.getContext(\'2d\');
//普通环境下设置canvas的宽高
var w = 1000, h = 0;
w = this.width;
h = this.height;
canvas.width = w;
canvas.height = h;
ctx.drawImage(this, 0, 0, w, h);
var dataURL = canvas.toDataURL(\'image/jpeg\');
if (navigator.userAgent.match(/iphone/i)) {
if (orientation != "") {
switch (orientation) {
case 3:
ctx.rotate(180 * Math.PI / 180);
ctx.drawImage(this, -w, -h, w, h);
break;
case 6:
//这里由于将图片纠正了回来，所以也要重新设置canvas的高已达到高度自适应
canvas.width = 750;
var scale = this.height / this.width;
canvas.height = canvas.width / scale;
h = 750 > this.height ? this.height : 750;
w = h / scale;
ctx.rotate(90 * Math.PI / 180);
ctx.drawImage(this, 0, -h, w, h);
show();
break;
case 8:
ctx.rotate(270 * Math.PI / 180);
ctx.drawImage(this, -h, 0, h, w);
show();
break;
case 2:
ctx.translate(w, 0);
ctx.scale(-1, 1);
ctx.drawImage(this, 0, 0, w, h);
show();
break;
case 4:
ctx.translate(w, 0);
ctx.scale(-1, 1);
ctx.rotate(180 * Math.PI / 180);
ctx.drawImage(this, -w, -h, w, h);
show();
break;
case 5:
ctx.translate(w, 0);
ctx.scale(-1, 1);
ctx.rotate(90 * Math.PI / 180);
ctx.drawImage(this, 0, -w, h, w);
show();
break;
case 7:
ctx.translate(w, 0);
ctx.scale(-1, 1);
ctx.rotate(270 * Math.PI / 180);
ctx.drawImage(this, -h, 0, h, w);
show();
break;
default:
ctx.drawImage(this, 0, 0, w, h);
show();
}
}
}
else {
ctx.drawImage(this, 0, 0, w, h);
show();
}
function show(){
var str=\'<div class="img_item"><img src="\'+dataURL+\'"><i class="del"></i></div>\';
if(num<6){
var flg=true;
for(var i=0;i<imgArr.length;i++){
if(imgArr[i]==dataURL){
alert(\'不能重复上传图片!!!\');
flg=false;
}
}
if(flg==true){
$(\'.img_list\').prepend(str);
imgArr.push(dataURL);
$(\'.mo\').css(\'display\',\'none\');
$(\'.fot\').css(\'display\',\'none\');
num++;
}
}
else{
alert(\'图片上限为6张！\');
$(\'.mo\').css(\'display\',\'none\');
$(\'.fot\').css(\'display\',\'none\');
}
}
};
};
}
}
//删除图片
$(".del-wrapper").on("click",".del",function(){
var index=$(this).parent().index();
console.log(index);
imgArr.splice(index,1);
num=num-1;
$(this).parent().remove();
});
$(\'.openImg\').click(function(){
$(\'.mo\').css(\'display\',\'block\');
$(\'.fot\').css(\'display\',\'block\');
});
$(\'.c\').click(function(){
$(\'.mo\').css(\'display\',\'none\');
$(\'.fot\').css(\'display\',\'none\');
});
//监控文本域的长度和内容
var textLen=0;
$(\'#textareaVal\').on(\'input\',function(){
textLen=$(\'#textareaVal\').val().length;
if(textLen>0){
$(\'.btn\').addClass(\'btn_submit\');
}
else{
$(\'.btn\').removeClass(\'btn_submit\');
}
$(\'.text_num\').html(textLen);
});
})
</script>
</body>
</html>
CSS文件
.tit {
width: 100%;
height: 2.66667rem;
padding: 0.32rem 0 0.32rem 0.32rem;
background: #ffffff; }
.tit .titL {
width: 2.13333rem;
height: 1.86667rem; }
.tit .titL img {
display: block;
width: 100%;
height: 100%; }
.tit .titR {
width: 7.52rem;
height: 1.86667rem;
padding-top: 0.26667rem;
padding-left: 0.26667rem; }
.tit .titR p {
width: 6.82667rem;
height: 0.93333rem;
font-size: 0.37333rem;
line-height: 0.48rem;
color: #4c4c4c;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical; }
.ping p.p_tit {
width: 100%;
height: 1.06667rem;
padding: 0.48rem 0 0.24rem 0.32rem;
font-size: 0.37333rem;
color: #4c4c4c;
background: #f5f5f5; }
.ping .ly {
font-size: 0.37333rem;
color: #4c4c4c;
padding: 0.42667rem 0.32rem 0 0.32rem;
background: #ffffff;
position: relative; }
.ping .ly textarea {
border: none;
width: 100%;
height: 4.8rem;
background: #ffffff;
font-size: 0.37333rem;
color: #4c4c4c; }
.ping .ly textarea ::-webkit-textarea-placeholder {
color: #999999; }
.ping .ly span {
font-size: 0.32rem;
color: #999999;
position: absolute;
right: 0.32rem;
bottom: 0.4rem; }
.ping .img_group {
width: 100%;
background: #ffffff;
padding: 0.4rem 0.32rem;
border-top: 1px solid #ededed; }
.ping .img_group p {
font-size: 0.37333rem;
color: #4c4c4c;
margin-bottom: 0.48rem; }
.ping .img_group .img_list {
width: 100%;
height: 2rem;
max-height: 4rem;
background: #ffffff; }
.ping .img_group .img_list .img_item {
display: block;
float: left;
border-radius: 0.10667rem;
width: 2rem;
height: 2rem;
margin-right: 0.34667rem;
position: relative; }
.ping .img_group .img_list .img_item img {
display: block;
border-radius: 0.10667rem;
width: 100%;
height: 100%; }
.ping .img_group .img_list .img_item i {
background: url("../img/de_ete.png") no-repeat;
background-size: 100%;
display: block;
width: 0.64rem;
height: 0.64rem;
position: absolute;
right: -0.18667rem;
top: -0.21333rem; }
.ping .img_group .img_list .img_item:nth-of-type(4) {
margin-right: 0; }
.ping .img_group .img_list .img_item:nth-of-type(5), .ping .img_group .img_list .img_item:nth-of-type(6), .ping .img_group .img_list .img_item:nth-of-type(7) {
margin-top: 0.42667rem;
margin-bottom: 0.4rem; }
.ping .btn_div {
clear: both;
width: 100%;
height: 2.64rem;
background: #f5f5f5;
padding-top: 0.66667rem; }
.ping .btn_div button {
display: block;
width: 9.4rem;
height: 1.28rem;
line-height: 1.28rem;
text-align: center;
color: #ffffff;
margin: 0 auto;
border: none; }
.ping .btn_div button.btn {
background: #cccccc; }
.ping .btn_div button.btn_submit {
background: #f02e34; }
.mo {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); }
.fot {
position: fixed;
width: 100%;
height: 4.10667rem;
bottom: 0.13333rem; }
.fot .fot_item {
display: block;
width: 100%;
height: 1.28rem;
line-height: 1.28rem;
text-align: center;
font-size: 0.42667rem;
color: #4c4c4c;
position: relative; }
.fot .fot_item button {
display: block;
width: 9.09333rem;
height: 100%;
background: #ffffff;
position: absolute;
left: 50%;
margin-left: -4.54667rem;
border: none; }
.fot .fot_item input {
display: block;
width: 2.21333rem;
height: 0.72rem;
position: absolute;
z-index: 100;
left: 50%;
top: 50%;
margin-left: -1.10667rem;
margin-top: -0.36rem;
opacity: 0; }
.fot button.a {
border-radius: 0.13333rem 0.13333rem 0 0;
border-bottom: 1px solid #ededed; }
.fot button.b {
border-radius: 0 0 0.13333rem 0.13333rem; }
.fot button.c {
margin-top: 0.13333rem;
border-radius: 0.13333rem; }
.success {
position: fixed;
top: 50%;
left: 50%;
text-align: center;
background: rgba(0, 0, 0, 0.6);
font-size: 0.37333rem;
color: #ffffff;
border-radius: 0.13333rem;
width: 2.88rem;
height: 1.2rem;
line-height: 1.2rem;
margin-top: -0.6rem;
margin-left: -1.44rem; }
以上是关于JS实现图片的选择并预览，并且能删除的主要内容，如果未能解决你的问题，请参考以下文章