JS实现图片的选择并预览，并且能删除
2021-05-18 13:29
YPE html>
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
评价
湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣
湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣
请填写您的评价内容
0/120
上传图片
$(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
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=‘‘;
if(num
var flg=true;
for(var i=0;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);
});})
CSS文件
上一篇：查找数据的网站
下一篇：JS小tips 之 变量声明提前