后台管理系统中一些需要上传图片 以及点击图片切换的操作 还有移动端的上传图片,保存方便后期调用
基于
//Mask_New_Post.aspx页面
$(function () {
wechatHelper.getWechatLocation(function (data) { wechatHelper.trackRecord(13, data.latitude, data.longitude, data.address); }, function () { });
$('[data-key="Content" ]').click();
})
$('body').on('click keyup', '.content-main', function () {
CaretPos.getCaretPos(this);
})
if (SetData.CircleList == null || SetData.CircleList == []) {
$.alert('请先加入圈子', '', function () {
window.location.href = 'Find_Circle.aspx';
});
} else {
var id = getQueryString("Id");
var setArr = SetData.CircleList;
var valueArr = [];
var idArr = [];
for (var i = 0 ; i < setArr.length; i++) {
if (setArr[i].Type > 0 && setArr[i].WE > 0) {
valueArr.push(setArr[i].CircleName);
idArr.push(setArr[i].Id);
} else if (setArr[i].Type == 0) {
valueArr.push(setArr[i].CircleName);
idArr.push(setArr[i].Id);
}
if (setArr[i].Id == id) {
$("#selectCircle").attr("value", setArr[i].CircleName);
$("#selectCircle").attr("data-id", setArr[i].Id);
}
}
$('#selectCircle').picker({
title: '请选择圈子',
cols: [{
textAlign: 'center',
displayValues: valueArr,
values: idArr
}],
onChange: function (e) {
return e.value[0] = e.cols[0].displayValue;
},
onClose: function (e) {
$('#selectCircle').attr('data-id', e.cols[0].value);
// setAddr.select = e.cols[0].displayValue;
//setAddr.value = e.cols[0].value;
}
});
}
//表情相关
$('.FaceModel ul').html(setQQFace());
$('body').on('click', '.biaoqingbtn', function () {
var that = $(this)
var FaceModel = $('.FaceModel')
var type = FaceModel.css('display');
if (type == 'none') {
FaceModel.show();
} else {
FaceModel.hide();
}
});
$('.mask').click(function () {
$('.FaceModel').hide();
});
//生成表情列表
function setQQFace() {
var html = '';
for (var i = 1; i < 75; i++) {
var str = '[em_' + i + ']';
html += '
');
str = str.replace(/\[em_([0-9]*)\]/g, '
');
return str;
}
}
//表情相关结束
//添加表情到文本框
//图片设置相关
setImg(); //添加图片到文本框
var UpdataImgAddress = null;
function setImg() {
$('#HeaderImg').localResizeIMG({ //事件绑定
quality: 1, //压缩限制
before: function (that, bold, file) { //判断图片类型
if (!/image\/\w+/.test(file.type)) {
$.alert('请提交图片格式文件', '')
return false;
}
return true;
},
success: function (result) {
var img = $('![]()
');
img.attr('src', result.base64);
img.css({ 'width': '100px'});
//此处100px设置在编辑帖子页面的图片宽度，
var imgText = img[0].outerHTML
CaretPos.setCaretPos();
//获取光标位置的方法
if (UpdataImgAddress)
//通过判断自定义的变量是一个null还是对象，来确定是是重新传入值来替换还是插入一个新的图片模块
$(UpdataImgAddress).html(imgText);
else
$('.append').append(AddImg(imgText));
}
});
$('.addphoto').click(function () {
UpdataImgAddress = null;
$('#HeaderImg').click();
});
}
$('body').on('click', '[data-key="ContentImg"]', function () {
//[data-key="ContentImg"]代表图片插入的那个对象
UpdataImgAddress = this;
$('#HeaderImg').click();
})
function AddImg(base64) {
return '图片
' + base64 + ' 
移至顶部上移下移
'
}
//根据val的数量*字体大小调整长度
function inputSize_auto(j_class) {
var f_size = j_class.css('font-size');
var size = parseInt(f_size.slice(0, f_size.indexOf('p')));
var num = j_class.val().length;
var i_width = size * num;
j_class.css("width", i_width);
}
inputSize_auto($(".choose_circle"));
$('#MakePost').click(function () {
//$('[data-key="Content"]')[0].setSelectionRange(10, 10);
//document.selection.moveStart = 10;
var upData = getHtmlData({
parentAddr: $('.make_post_list'),
});
upData.Id = $('#selectCircle').attr('data-id');
if (upData.Id == -1) {
$.alert('请选择圈子！', '')
return
}
if (!$(".post_name_input").html()) {
$.alert('请填写帖子标题！', '')
return
}
upData.UId = SetData.UId;
var html = '';
$('.content-main').each(function () {
html += $(this).html()+'
';
})
html = html.replace(/style="width: 100px;"/g, "style='width: 100%;'");
console.log(html);
if (!html.trim()){
$.alert('请填写内容', '')
return
}
$.showLoading();
upData.Content = html;
$.ajax({
type: "POST",
url: "Make_New_Post.aspx/POST",
dataType: "json",
data: JSON.stringify({ d: upData }),
contentType: "application/json; charset=utf-8",
success: function (data) {
$.hideLoading();
if (data.d.status == 'success') {
$.alert(data.d.message, ' ', function () {
window.location.href = "Default.aspx";
});
} else {
$.alert(data.d.message);
}
}
});
});
//lxf
$('.addtext').on('click', function () {
var inner = '内容 移至顶部上移下移'
$('.append').append(inner)
})
//按钮组弹出
var flag = true;
$('body').on('click', '.sortbtn', function () {
if (flag) {
$(this).parent().find('.sort-box').css("transform", "translateX(50px)");
flag = false;
} else {
$(this).parent().find('.sort-box').css("transform", "translateX(500px)");
flag = true;
}
})
$('body').on('click', '.close-all', function () {
var par = $(this).parent().parent()
$(par).css({ transform: 'translateX(500px)' });
setTimeout(function () {
$(par).remove();
}, 500)
})
$('body').on('click', '.maketotop', function () {
var parents = $(this).parent().parent().parent();
$('.append').prepend($(parents))
})
$('body').on('click', '.maketoup', function () {
var parents = $(this).parent().parent().parent();
var index = $(parents).index() - 1;
if (index < 0) {
index = 0
}
$('.append').find('.content-box').eq(index).before($(parents))
})
$('body').on('click', '.maketodown', function () {
var parents = $(this).parent().parent().parent();
$(parents).next().after(parents)
})
html
后台图片传输 1张
function ImgUploadInt(mainId) {
var _this = "";//按钮地址
var tplImgBox = "![](\"images/icon_add.png\")
";
var mainId = mainId || ""; //主id默认为空
$(mainId + ' .img-group').click(function (e) {
if (e.target.className === 'add-imgs') {
$('#ImgFile').click();
_this = $(e.target);
}
});
$(mainId + ' #ImgFile').localResizeIMG({ //事件绑定
width: 400, //宽度限制
quality: 1, //压缩限制
before: function (that, bold, file) { //判断图片类型
if (!/image\/\w+/.test(file.type)) {
layer.open({
content: "请提交图片格式的文件",
btn: '确认'
});
return false;
}
return true;
},
success: function (result) {
_this.attr("src", result.base64);
_this.attr("data-show", 'readly');
}
});
}
ImgUploadInt('#myModal');
后台传输图片 一个页面多个接口
//**********图片上传逻辑
function ImgUploadInt(mainId, num) {
var _this = "";//按钮地址
var tplImgBox = "";
var mainId = mainId || ""; //主id默认为空
var num = num || 1000; //添加几个，默认为0
$(mainId + ' .img-group').click(function (e) {
if (e.target.className === 'add-imgs') {
$('#ImgFile').click();
_this = $(e.target);
}
});
$(mainId + ' #ImgFile').localResizeIMG({ //事件绑定
width: 400, //宽度限制
quality: 1, //压缩限制
before: function (that, bold, file) { //判断图片类型
if (!/image\/\w+/.test(file.type)) {
layer.open({
content: "请提交图片格式的文件",
btn: '确认'
});
return false;
}
return true;
},
success: function (result) {
if (_this.parent().siblings().length < num) {
_this.attr("src", result.base64);
_this.attr("data-show", 'readly');
}
}
});
}
ImgUploadInt('#myModal');
实训平台图片处理
//图片处理
var UpdataImgAddress = null;
function ImgUploadInt(mainId) {
var _this = "";//按钮地址
var mainId = mainId || ""; //主id默认为空
$('body').on('click', '.img_box', function (e) {
UpdataImgAddress = null;
$('#ImgFile').click();
_this = $(e.target);
});
$('body').on('click', '#add_img', function (e) {
UpdataImgAddress = this;
$('#ImgFile').click();
return false;
});
$('#ImgFile').localResizeIMG({ //事件绑定
// width: 400, //宽度限制
quality: 1, //压缩限制
before: function (that, bold, file) { //判断图片类型
if (!/image\/\w+/.test(file.type)) {
layer.open({
content: "请提交图片格式的文件",
btn: '确认'
});
return false;
}
return true;
},
success: function (result) {
if (UpdataImgAddress)
$(UpdataImgAddress).attr('src', result.base64);
else
$('.img_box').html('
');
}
});
}
ImgUploadInt();