<!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 >
???????<div >
???????????<div >
???????????????<img src="img/img3.jpg">
???????????</div>
???????????<div >
???????????????<p>
???????????????????湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣
???????????????????湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣
???????????????</p>
???????????</div>
???????</div>
???????<div >
???????????<p >请填写您的评价内容</p>
???????????<div >
???????????????<textarea name="" cols="" rows="" placeholder="分享您的使用心得" maxlength="120"></textarea>
???????????????<span><em >0</em>/120</span>
???????????</div>
???????????<div >
???????????????<p >上传图片</p>
???????????????<div >
???????????????????<!--<div >
???????????????????????<img src="img/img3.jpg">
???????????????????????<i ></i>
???????????????????</div>-->
???????????????????<div >
???????????????????????<img src="img/add_photos.png">
???????????????????</div>
???????????????</div>
???????????</div>
???????????<div >
???????????????<button >提交评价</button>
???????????</div>
???????</div>
???????<div style="display: none;"></div>
???????<div style="display: none;">
???????????<div >
???????????????<button >拍摄</button>
???????????????<input type="file" accept="image/*" capture="camera" onchange="showPicture(this,‘image‘);"><!--针对手机上的摄像头进行调用，在PC使用会非常慢-->
???????????????<!--<input type="file" onchange="showPicture(this,‘image‘);">-->
???????????</div>
???????????<div >
???????????????<button >从相册选择</button>
???????????????<input type="file" onchange="showPicture(this,‘image2‘);">
???????????</div>
???????????<div >
???????????????<button >取消</button>
???????????</div>
???????</div>
???????<div 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 ><img src="‘+dataURL+‘"><i ></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-left: 0.26667rem; }
???.tit .titR p {
?????width: 6.82667rem;
?????height: 0.93333rem;
?????
?????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;
?
?color: #4c4c4c;
?background: #f5f5f5; }
.ping .ly {
?
?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;
???
???color: #4c4c4c; }
???.ping .ly textarea ::-webkit-textarea-placeholder {
?????color: #999999; }
?.ping .ly span {
???
???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 {
???
???color: #4c4c4c;
??? }
?.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) {
?????
????? }
.ping .btn_div {
?clear: both;
?width: 100%;
?height: 2.64rem;
?background: #f5f5f5;
? }
?.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;
???
???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;
?????
?????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 {
???
???border-radius: 0.13333rem; }
.success {
?position: fixed;
?top: 50%;
?left: 50%;
?text-align: center;
?background: rgba(0, 0, 0, 0.6);
?
?color: #ffffff;
?border-radius: 0.13333rem;
?width: 2.88rem;
?height: 1.2rem;
?line-height: 1.2rem;
?
?margin-left: -1.44rem; }
JS实现图片的选择并预览，并且能删除
原文地址：http://www.cnblogs.com/qiuchuanji/p/7736465.html