点击框上传一张图片，并生成另一个点击框可再点击上传，修改时获取相对路径赋值多张图片，带有点击图片放大查看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet" href="/Content/preview.css">
<style type="text/css">
.submit_evaluation_pothos2{
float:left;
margin-right:10px;
}
</style>
<body>
<div class="mask1"></div>
<div id="app" class="zoomImgBox" id="lookdapic">
<div style="margin-left: 10px; background: #fff;z-index:1;height:100px;" class="zoomImgBox" id="submit_evaluation_commoditylist"></div>
<div class="wzc" style="width:200px;margin: 0 auto;">
<input id="fb1" readonly labelposition="left" style="width:58px;background-color: #EEE;border: #B5B5B5 1px solid;display: none;" type="text" name="fb1" autocomplete="off" />
<input type="file" ref="fileRef" v-on:change="fileChange" accept="image/png,image/jpg,image/jpeg,image/bmp" id="file1" class="ffii" style="width:283px;height:30px;line-height:30px; display: none">
<button class="btn btn-app btn-danger btn-sm" id="scsltBtn" v-on:click="fb1Fn(3)">插入图片</button>
<img src="/Content/images/basic/img/close.png" v-on:click="reduceRow1" style="vertical-align: bottom;cursor: pointer;">
<input type="hidden" id="baseT1" name="baseTT" value="">
</div>
</div>
<input type="hidden" id="submit_evaluation_num" />
<input type="hidden" id="submit_evaluation_tid" />
<input type="hidden" id="submit_evaluation_servicenum" />
<input type="hidden" id="submit_evaluation_phototnum" />
</body>
<script src="../js/vue.js"></script>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="/Scripts/preview.js"></script>
<script src="/Scripts/localResizeIMG.js"></script>
<script type="text/javascript">
$(function () {
submit_evaluation_getlist()
})
var vm = new Vue({
el: "#app",
data: {
CurID:'',//传入的编号
pic:'',
pic1:'',
curCTLJ:''
},
created() {
this.CurID = Number($("#CurID").val());
this.getRJData()
},
methods: {
getRJData(){
var self = this
$(".mask1").html("<center class='loding'><img src='/Scripts/theme/default/loading-1.gif'></center>")
$(".mask1").fadeIn(150);
$.ajax({
type: 'post',
dataType: "json",
url: "/Reception/DingDan_RJ_GetModel?t=" + Math.random(),
data: {
DDID: this.CurID,
},
cache: false,
async: true,
success: function (msg) {
console.log(msg)
$(".mask1").html("")
$(".mask1").fadeOut(150);
if (msg.status.code == 1) {
//图片有就转成base64
var info = msg.row_data.record
// self.pic = info.CTLJ
if(info.CTLJ != null && info.CTLJ != ''){
self.pic = info.CTLJ + '?v=' + Math.random()
}
$("#rqDate").val(info.RQ)
var file_typename = info.CTLJ.substring(info.CTLJ.lastIndexOf('.'), info.CTLJ.length);
$("#baseT1").attr('houzhui',file_typename)//后缀名
$("#baseT1").attr('addr',info.CTLJ)//url
$("#file1").val("");
$("#fb1").val('');//文件名
var img = new Image();
img.src = info.CTLJ;
img.onload = function () {
//默认按比例压缩
var w = this.width,//img.
h = this.height;//img.
var quality = 0.7; // 默认图片质量为0.7
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 创建属性节点
// var anw = document.createAttribute('width')
// anw.nodeValue = w
// var anh = document.createAttribute('height')
// anh.nodeValue = h
canvas.setAttribute("width", w);//anw
canvas.setAttribute("height", h);//anh
ctx.drawImage(this, 0, 0, w, h);
// quality值越小，所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality);
// 回调函数返回base64的值
// $("#baseT1").val(base64.split(',')[1]);//文件base64
$("#baseT1").val(base64);//文件base64
}
var ary = []
if(info.MBSJLJ1){
ary.push(info.MBSJLJ1)
}
if(info.MBSJLJ2){
ary.push(info.MBSJLJ2)
}
if(info.MBSJLJ3){
ary.push(info.MBSJLJ3)
}
if(info.MBSJLJ4){
// ary.push(self.dealImage(info.MBSJLJ4))
ary.push(info.MBSJLJ4)
}
//获取的提供样本可按照您提供的图片设计图片，转为可编辑
$.each(ary,function(index,item){
setTimeout(function(){
var temp = "#submit_potho" + index
gaiPotho(temp, index, item);
},300)
})
} else {
alert(msg.status.msg)
}
},
error:function(){
$(".mask1").html("")
$(".mask1").fadeOut(150);
}
});
},
//保存退出
baocunFn(){
//图片有就传base64
var self = this
var CT_Base64 = $("#baseT1").val()
//顶部图片
var ary = []
var img = $('#submit_evaluation_commoditylist').find('.zoomImg').filter(function(index,item) {
return $(item).attr("src");
});
var tp1 = ''
var tp2 = ''
var tp3 = ''
var tp4 = ''
img.each(function(index,item){
var curSrc = $(item).attr('src')
//ary.push(curSrc)
if(index==0){
tp1 = curSrc
}else if(index==1){
tp2 = curSrc
}else if(index==2){
tp3 = curSrc
}else if(index==3){
tp4 = curSrc
}
// ary.push(curSrc.split(',')[1])
})
console.log(tp1,tp2,tp3,tp4)
},
//vue版传图
fb1Fn:function(num){
this.chuantuFS = num
//vue模拟点击事件
this.$refs.fileRef.dispatchEvent(new MouseEvent('click'))
//this.$refs.fileRef.click()
// $("#file1").click()
},
fileChange:function(e){
var self = this
// console.log(e.target.files);
var file = e.target.files[0];
if (typeof file == 'undefined') {
return
}
var file_typename = file.name.substring(file.name.lastIndexOf('.'), file.name.length);
if (!self.flagHZ(file_typename)) {
$("#baseT1").val("");//文件base64
$("#baseT1").prop('title', "");//文件名
$("#baseT1").attr('houzhui', "");//后缀名
$("#baseT1").attr('addr', "");//url
$("#file1").val("");
$("#fb1").val('');//文件名
alert("请上传后缀名为：.png或.jpg或.jpeg或.bmp的文件");
return
}
$("#fb1").val(file.name);//文件名
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = async function (ev) {
// console.log(ev.target);
// $("#baseT1").val(reader.result.split(',')[1])//文件base64
let result = this.result;
let rrr = await self.dealImage(result, file,file_typename)
// console.log(rrr);
if(self.chuantuFS == 3){
//插入图片(不用去底色)
$("#baseT1").val(rrr)//文件base64
}
};
},
reduceRow1:function(){
$("#baseT1").val("");//文件base64
this.pic = '/Content/img/zhanwei.jpg'
this.pic1 = '/Content/img/zhanwei.jpg'
this.curCTLJ = ''
$("#baseT1").prop('title',"");//文件名
$("#baseT1").attr('houzhui',"")//后缀名
$("#baseT1").attr('addr',"")//url
$("#file1").val("");
$("#fb1").val('');//文件名
},
flagHZ:function(str){
var flag = false;
var ary = ['.png','.jpg','.jpeg','.bmp'];
for(var i=0;i<ary.length;i++){
if(str == ary[i]){
flag = true
break;
}
}
return flag;
},
//图片路径转base64
dealImage: function(path,file,file_typename){
return new Promise((resolve, reject) => {
var img = new Image();
img.src = path;
img.onload = function () {
//默认按比例压缩
var originWidth = this.width,//img.
originHeight = this.height;//img.
var quality = 0.7; // 默认图片质量为0.7
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 创建属性节点
// var anw = document.createAttribute('width')
// anw.nodeValue = w
// var anh = document.createAttribute('height')
// anh.nodeValue = h
// 最大尺寸限制
const maxWidth = 1600;
const maxHeight = 1600;
// 目标尺寸
let targetWidth = originWidth;
let targetHeight = originHeight;
if (originWidth > maxWidth || originHeight > maxHeight) {
if (originWidth / originHeight > 1) {
// 宽图片
targetWidth = maxWidth;
targetHeight = Math.round(maxWidth * (originHeight / originWidth))
} else {
// 高图片
targetHeight = maxHeight;
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
}
}
canvas.width = targetWidth;
canvas.height = targetHeight;
// context.clearRect(0, 0, targetWidth, targetHeight);
canvas.setAttribute("width", targetWidth);//anw
canvas.setAttribute("height", targetHeight);//anh
ctx.drawImage(this, 0, 0, targetWidth, targetHeight);
// quality值越小，所绘制出的图像越模糊
// console.log(file_typename.slice(1));
var base64 = canvas.toDataURL('image/png', quality);
// 回调函数返回base64的值
// resolve(base64.split(',')[1])
// console.log(base64);
resolve(base64)
}
})
},
//获取上次填写内容
hqsctxnrFn(){
var self = this
$(".mask1").html("<center class='loding'><img src='/Scripts/theme/default/loading-1.gif'></center>")
$(".mask1").fadeIn(150);
setTimeout(function(){
$.ajax({
type: 'post',
dataType: "json",
url: "/Reception/DingDan_GetLast?t=" + Math.random(),
data: {},
cache: false,
async: false,
success: function (msg) {
console.log(msg)
$(".mask1").html("")
$(".mask1").fadeOut(150);
if (msg.status.code == 1) {
var info = msg.row_data.record//日期，插图
if(info.CTLJ != ''){
var rrr = ''
setTimeout(async ()=>{
rrr = await self.getBase64(info.CTLJ)
},1000)
}
} else {
alert(msg.status.msg)
}
},
error:function(){
$(".mask1").html("")
$(".mask1").fadeOut(150);
}
});
},500)
},
getBase64(imgUrl) {
console.log(imgUrl);
var self = this
window.URL = window.URL || window.webkitURL;
var xhr = new XMLHttpRequest();
xhr.open("get", imgUrl, true);
// 至关重要
xhr.responseType = "blob";
xhr.onload = function () {
if (this.status == 200) {
//得到一个blob对象
var blob = this.response;
// console.log("blob", blob)
// 至关重要
let oFileReader = new FileReader();
oFileReader.onloadend = function (e) {
// 此处拿到的已经是 base64的图片了
let base64 = e.target.result;
// console.log(base64)
$("#baseT1").val(base64)//文件base64
self.pic = base64
self.pic1 = base64
self.curCTLJ = base64
};
oFileReader.readAsDataURL(blob);
}
}
xhr.send();
},
}
})
//上传图片
function submit_evaluation_getlist() {
$("#submit_evaluation_num").val(1);
var i = 0;
var list = $("#submit_evaluation_commoditylist");
var str = "";
list.html("");
str += '<div class="submit_evaluation_columns">'
+ '<div class="sign_register_columns" style=" height: 110px; margin-bottom: 0; font-size: 12px; color: #333; position: relative; ">'
+ '<div style="position:absolute;top:0;left:0;width:100%;height:75px;">'
+ '<input type="hidden" id="imgFileStream' + i + '" />'
+ '<div style=" margin-bottom: 0; font-size: 12px; color: #333;" class="content' + i + '">'
+ '<div class="sign_register_column" style="width:100%;margin:0 0;border:none;text-align:center;min-height:100px;max-height:200px;overflow:hidden" >'
+ '<div class="submit_evaluation_pothos" >'
+ '</div>'
+ '<div class="submit_evaluation_pothos2" style="width:77px;height:77px;margin-top:10px;border:1px dashed #ccc;position:relative;" id="submit_potho' + i + '" onclick="submit_evaluation_potho(this,' + i + ')">'
+ '<img src="/Content/images/basic/camera.png" style="width:35px;height:35px;margin-top:15px;"/>'
+ '<dd style="width:100%;height:100%;position:absolute;top:0;left:0;margin-left:0;overflow: hidden;">'
+ '<img class="zoomImg" style="position:absolute;left:0;height:100%;cursor: pointer;" onl oad="AutoSize(this,80,80)"/>'
+ '</dd >'
+ '<input type="file" style="width: 100%; height: 77px;position:absolute;top:0;left:0; opacity: 0;border:1px dashed #ccc;cursor: pointer; ">'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</div>'
list.html(str)
}
var imgFileStream = "";
function submit_evaluation_potho(t, i) {
//
var input = $(t).find("input");
//console.log(input)
$("#submit_evaluation_phototnum").val(input.length);
input.localResizeIMG({
width: 1800,
quality: 0.6,
success: function (result) {
//console.log(result)
var num = parseFloat($(t).parent().find("div").length) - 1;
if (num == 3) {
$(".content" + i).css("height", "130px")
}
var img = new Image();
img.src = result.base64;
$(t).find("img").eq(1).attr("src", img.src);
// $(t).find("img").addClass("zoomImg");
var wid = parseFloat(img.width)
var hei = parseFloat(img.height);
if (wid > hei) {
$(t).find("img").eq(1).css("height", "100%");
var aa = wid - hei;
var bi = aa / 2 / hei;
} else if (wid < hei) {
$(t).find("img").eq(1).css("width", "100%");
var aa = hei - wid;
var bi = (aa / 2 / wid).toFixed(2);
}
$(t).find("input").hide();
$(t).append('<img src="/Content/images/basic/closer.png" style="width: 20px; height: 20px;position:absolute;top:-9px;right:-9px;z-index:10;overflow: visible;cursor: pointer;" onclick="picquxiao(this,' + i + ')"/>')
var geshu = parseFloat($(t).parent().find("div").length) - 1;
imgFileStream = $("#imgFileStream" + i).val()
// imgFileStream += $(t).parent().find("div").eq(geshu).find("img").eq(1).attr('src').split(',')[1];
imgFileStream += ";" + $(t).parent().find("div").eq(geshu).find("img").eq(1).attr('src').split(',')[1];
$("#imgFileStream" + i).val(imgFileStream)
if (num >= 4) {
return
}
$(t).parent().append('<div class="submit_evaluation_pothos2" style="width:77px;height:77px;margin-top:10px;border:1px dashed #ccc;position:relative" id="submit_potho" onclick="submit_evaluation_potho(this,' + i + ')">'
+ '<img src="/Content/images/basic/camera.png" style="width:35px;height:35px;margin-top:15px;"/>'
+ '<dd style="width:100%;height:100%;position:absolute;top:0;left:0;margin-left:0;overflow:hidden">'
+ '<img class="zoomImg" style="position:absolute;left:0;height:100%;cursor: pointer;" onl oad="AutoSize(this,80,80)"/>'
+ '</dd >'
+ '<p style="font-size:12px;margin-top:-10px;">' + num + '/4</p>'
+ '<input type="file" style="width: 100%; height: 100%;position:absolute;top:0;left:0; opacity: 0;border:0.01rem dashed #ccc;cursor: pointer;">'
+ '</div>');
}
})
}
//4连张赋值图片
function gaiPotho(t, i, src) {
var base64 = ''
if(src == '' || typeof src == 'undefined' || src ==null){
return
}
// console.log(t,i)
var num = parseFloat($(t).parent().find("div").length) - 1;
if (num == 3) {
$(".content" + i).css("height", "130px")
}
var img = new Image();
img.src = src;
// window.URL = window.URL || window.webkitURL;
var xhr = new XMLHttpRequest();
xhr.open("get", src, true);
// 至关重要
xhr.responseType = "blob";
xhr.onload = function () {
if (this.status == 200) {
//得到一个blob对象
var blob = this.response;
// console.log("blob", blob)
// 至关重要
let oFileReader = new FileReader();
oFileReader.onloadend = function (e) {
// 此处拿到的已经是 base64的图片了
base64 = e.target.result;
$(t).find(".zoomImg").attr("src", base64);
$(t).find(".zoomImg").attr("name", src);
};
oFileReader.readAsDataURL(blob);
}
}
xhr.send();
var wid = parseFloat(img.width)
var hei = parseFloat(img.height);
if (wid > hei) {
$(t).find(".zoomImg").css("height", "100%");
var aa = wid - hei;
var bi = aa / 2 / hei;
} else if (wid < hei) {
$(t).find(".zoomImg").css("width", "100%");
var aa = hei - wid;
var bi = (aa / 2 / wid).toFixed(2);
}
$(t).find("input").hide();
$(t).append('<img src="/Content/images/basic/closer.png" style="width: 20px; height: 20px;position:absolute;top:-9px;right:-9px;z-index:10;overflow: visible;" onclick="picquxiao(this,' + (i+1) + ')"/>')
var geshu = parseFloat($(t).parent().find("div").length) - 1;
$("#imgFileStream" + i).val(src)
if (num >= 4) {
return
}
$(t).parent().append('<div class="submit_evaluation_pothos2" style="width:77px;height:77px;margin-top:10px;border:1px dashed #ccc;position:relative" id="submit_potho' + (i+1) + '" onclick="submit_evaluation_potho(this,' + (i+1) + ')">'
+ '<img src="/Content/images/basic/camera.png" style="width:35px;height:35px;margin-top:15px;"/>'
+ '<dd style="width:100%;height:100%;position:absolute;top:0;left:0;margin-left:0;overflow:hidden">'
+ '<img class="zoomImg" style="position:absolute;left:0;height:100%;" onl oad="AutoSize(this,80,80)"/>'
+ '</dd >'
+ '<p style="font-size:12px;margin-top:-10px;">' + num + '/4</p>'
+ '<input type="file" style="width: 100%; height: 100%;position:absolute;top:0;left:0; opacity: 0;border:0.01rem dashed #ccc;">'
+ '</div>');
}
function picquxiao(t, i) {
var num = $(t).parent().parent().find("div").length - 2;
var div = $(t).parent().parent();
$(t).parent().remove();
if(num == 3){
$(".content" + i).css("height", "130px")
var img = div.find("div").eq(3).find("img").eq(1).attr('src');
// console.log(div.find("div"));
if (typeof img == 'undefined') {
num = num - 1
div.find("p").text(num + "/4")
} else {
div.append('<div class="submit_evaluation_pothos2" style="width:77px;height:77px;margin-top:10px;border:1px dashed #ccc;position:relative" id="submit_potho" onclick="submit_evaluation_potho(this,' + i + ')">'
+ '<img src="/Content/images/basic/camera.png" style="width:35px;height:35px;margin-top:15px;"/>'
+ '<dd style="width:100%;height:100%;position:absolute;top:0;left:0;margin-left:0;overflow:hidden">'
+ '<img class="zoomImg" style="position:absolute;left:0;height:100%;cursor: pointer;" onl oad="AutoSize(this,80,80)"/>'
+ '</dd >'
+ '<p style="font-size:12px;margin-top:-10px;">' + num + '/4</p>'
+ '<input type="file" style="width: 100%; height: 100%;position:absolute;top:0;left:0; opacity: 0;border:0.01rem dashed #ccc;cursor: pointer;">'
+ '</div>');
}
}else{
num = num - 1
if(num==0){
div.find("p").text("")
}else{
div.find("p").text(num + "/4")
}
}
imgFileStream = ''
var geshu = $("#submit_potho" + i).parent().find("div").length;
for (j = 1; j < geshu - 1; j++) {
imgFileStream += ";" + $("#submit_potho" + i).parent().find("div").eq(j).find("img").eq(1).attr('src').split(',')[1];
}
$("#imgFileStream" + i).val(imgFileStream)
}
function AutoSize(Img, maxWidth, maxHeight) {
//console.log(Img)
var image = new Image();
//原图片原始地址（用于获取原图片的真实宽高，当<img>标签指定了宽、高时不受影响）
image.src = Img.src;
//当图片比图片框小时不做任何改变
if (image.width < maxWidth && image.height < maxHeight) {
Img.width = maxWidth;
Img.height = maxHeight;
}
else //原图片宽高比例 大于 图片框宽高比例,则以框的宽为标准缩放，反之以框的高为标准缩放
{
if (maxWidth / maxHeight <= image.width / image.height) //原图片宽高比例 大于 图片框宽高比例
{
Img.width = maxWidth; //以框的宽度为标准
Img.height = maxWidth * (image.height / image.width);
if (Img.height < 80) {
Img.height = 75;
Img.width = 75;
//Img.style.left = "-8px";
//Img.style.top = "0px";
}
}
else { //原图片宽高比例 小于 图片框宽高比例
Img.width = maxHeight * (image.width / image.height);
Img.height = maxHeight; //以框的高度为标准
if (Img.width < 80) {
Img.width = 75;
Img.height = 75;
//Img.style.left = "0px";
//Img.style.top = "-8px";
}
}
}
}
showZoomImg('.zoomImg', 'img');
</script>
</html>
标签：function,src,img,base64,多图,var,操作,find From： https://www.cnblogs.com/liufeiran/p/17296737.html