图片上传处理

后台管理系统中一些需要上传图片 以及点击图片切换的操作 还有移动端的上传图片,保存方便后期调用

基于 <script src="~/Scripts/ImageHandle/ImgUpload.js"></script>
<script src="~/Scripts/ImageHandle/mobileBUGFix.mini.js"></script>

//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 += '<li><img src="../Resources/images/arclist/' + i + '.gif" data-number="[em_' + i + ']" onclick="setMsg(\' ' + str + ' \')" /></li>';
    }
    return html;
}
function setMsg(str) {
   //插入图片
    CaretPos.setCaretPos();
    $(CaretPos.element).insertText(replace_em(str));
    //表情转换
    function replace_em(str) {
        str = str.replace(/\</g, '&lt;');
        str = str.replace(/\>/g, '&gt;');
        str = str.replace(/\n/g, '<br/>');
        str = str.replace(/\[em_([0-9]*)\]/g, '<img src="../Resources/images/arclist/$1.gif" border="0" />');
        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>');
            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 '<div class="content-box photo-box li"><div class="head"><span>图片</span><img src="/Resources/images/post_cha.png" alt="Alternate Text" class="close-all"/></div><div class="content-main" data-key="ContentImg">' + base64 + '</div> <div class="content-foot"><img id="" src="/Resources/images/lxf-xiao.png" alt="Alternate Text" class="biaoqingbtn" style="visibility:hidden"/><div class="sort-box"><div class="maketotop">移至顶部</div><div class="maketoup">上移</div><div class="maketodown">下移</div></div><img src="/Resources/images/lxf-sort.png" alt="Alternate Text" class="sortbtn"/></div></div>'
}
//根据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()+'<br>';
    })
    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 = '<div class="content-box li"><div class="head"><span>内容</span><img src="/Resources/images/post_cha.png" alt="Alternate Text" class="close-all"/></div><div class="content-main" contenteditable="true" placeholder="请输入内容"></div> <div class="content-foot"><img id="" src="/Resources/images/lxf-xiao.png" alt="Alternate Text" class="biaoqingbtn"/><div class="sort-box"><div class="maketotop">移至顶部</div><div class="maketoup">上移</div><div class="maketodown">下移</div></div><img src="/Resources/images/lxf-sort.png" alt="Alternate Text" class="sortbtn"/></div></div>'
    $('.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

<input type="file" class="hide" id="ImgFile" />

后台图片传输 1张

 function ImgUploadInt(mainId) {
    var _this = "";//按钮地址
    var tplImgBox = "<div class=\"imgs-box\"><img src=\"images/icon_add.png\" class=\"add-imgs\"></img></div>";
    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 = "<div class=\"imgs-box\"><img src=\"images/icon_add.png\" class=\"add-imgs\"></img></div>";
    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('<img src="' + result.base64 + '" id="add_img" alt="Alternate Text" />');
        }
    });
}

ImgUploadInt();
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,761评论 5赞 460
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,953评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,998评论 0赞 320
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,248评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,130评论 4赞 356
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,145评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,550评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,236评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,510评论 1赞 291
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,601评论 2赞 310
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,376评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,247评论 3赞 313
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,613评论 3赞 299
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,911评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,191评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,532评论 2赞 342
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,739评论 2赞 335