图片上传处理

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

基于 <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();

图片上传处理

html

后台图片传输 1张

后台传输图片 一个页面多个接口

实训平台图片处理

后台传输图片一个页面多个接口