在做一个电子签名的页面,需要能新增多个签名框,现在新增后的框要如何复用之前调用 id
来使用的函数呢?
签名的代码如下
$(function() {// 初始化内容
$("#canvasEdit").attr("width" ,$("#editing_area").innerWidth()-1 );
//初始化动作,根据DOM的ID不同进行自定义,如果不写则内部默认取这四个
$().esign("canvasEdit", "sign_show", "sign_clear", "sign_ok");
//处理结果
$("#result").val($('#t1').text());
$('#t1').click(function () {
$("#result").val($('#t1').text());
});
$('#t2').click(function () {
$("#result").val($('#t2').text());
});
//=======弹窗签名=======
$('#btn').on('click', function(){
$('#dialog').show();
});
$('#dialog').on('click', '.weui_btn_dialog', function(){
$('#dialog').hide();
});
//-======上传图片==========================================
// 允许上传的图片类型
var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
var maxSize = 1024 * 1024*10; // 10240KB,也就是 10MB
var maxWidth = 1900; // 图片最大宽度
var maxCount = 2;// 最大上传图片数量
//
var tmpl = '<li class="weui-uploader__file" id="#ImgID#" style="background-image:url(#url#)"><div class="weui_uploader_status_content">0%</div></li>',
$gallery = $("#gallery"),
$galleryImg = $("#galleryImg"),
$uploaderInput = $("#uploaderInput"),
$uploaderFiles = $("#uploaderFiles");
$uploaderInput.on("change", function (e) {
files = e.target.files;
// 如果没有选中文件,直接返回
if (files.length === 0) {
return;
}
for (var i = 0, len = files.length; i < len; ++i) {
var file = files[i];
var imgID = genGUID();
var reader = new FileReader();
var fileType = file.type;
// 如果类型不在允许的类型范围内
if (allowTypes.indexOf(file.type) === -1) {
$.toast('该类型不允许上传' + fileType, "forbidden");
continue;
}
if (file.size > maxSize) {
$.toast("图片太大,不允许上传", "forbidden");
continue;
}
if ($('.weui-uploader__file').length >= maxCount) {
$.toast('最多只能上传' + maxCount + '张图片', "forbidden");
return;
}
reader.onload = function (e) {
var img = new Image();
img.onload = function () {
// 不要超出最大宽度
var w = Math.min(maxWidth, img.width);
// 高度按比例计算
var h = img.height * (w / img.width);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 设置 canvas 的宽度和高度
canvas.width = w;
canvas.height = h;
ctx.drawImage(img, 0, 0, w, h);
var base64 = canvas.toDataURL(fileType,0.6); //0.6指的是压缩60%
// 插入到预览区
$uploaderFiles.append($(tmpl.replace('#url#', base64).replace('#ImgID#', imgID)));
var num = $('.weui-uploader__file').length;
$('#uploadCount').text(num);
// 模拟上传进度
var progress = 0;
function uploading() {
$uploaderFiles.find('.weui_uploader_status_content').text(++progress + '%');
if (progress < 100) {
setTimeout(uploading, 30);
} else {
$uploaderFiles.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove();//清除上传进度图标
}
}
setTimeout(uploading, 30);
};
//alert(e.target.result);
img.src = e.target.result;
//alert(img.src);
//这里实现上传
//$.ajax({});
uploadImg(img.src,"1");
};
reader.readAsDataURL(file);
}
});
var index; //第几张图片
$uploaderFiles.on("click", "li", function () {
index = $(this).index();
$galleryImg.attr("style", this.getAttribute("style"));
$gallery.fadeIn(100);
});
$gallery.on("click", function () {
$gallery.fadeOut(100);
});
//删除图片
$(".weui-gallery__del").click(function () {
$uploaderFiles.find("li").eq(index).remove();
var num = $('.weui-uploader__file').length;
$('#uploadCount').text(num);
});
});
function uploadImg(base64Data,upLoadType){
var url = "/mtwork/deliveryMan/uploadBase64Img";
//alert(url);
$.ajax({
url:url,
async: false,//同步
type:"post",
data:{myPhoto:base64Data},
dataType:"JSON",
success:function(data){
if(upLoadType == "1"){
if($("#upLoadImg").val()==""){
$("#upLoadImg").val(JSON.parse(data.data).url);
}else{
$("#upLoadImg").val($("#upLoadImg").val()+";"+JSON.parse(data.data).url);
}
}else{
$("#upLoadSign").val(JSON.parse(data.data).url);
}
//alert(JSON.parse(data.data).url);
if(data.success == true){
console.log("上传成功");
}else{
console.log("上传失败");
}
},
error:function(){
console.log("上传失败");
}
});
}
//生成guid
function genGUID() {
var G1 = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
var G2 = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
return (G1 + G2);
}