圖片上傳處理

后臺管理系統(tǒng)中一些需要上傳圖片 以及點(diǎn)擊圖片切換的操作 還有移動端的上傳圖片,保存方便后期調(diào)用

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


//表情相關(guān)
$('.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));
    //表情轉(zhuǎn)換
    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;
    }
}
//表情相關(guān)結(jié)束
//添加表情到文本框
//圖片設(shè)置相關(guān)

setImg(); //添加圖片到文本框

var UpdataImgAddress = null;
function setImg() {
    $('#HeaderImg').localResizeIMG({ //事件綁定
        quality: 1, //壓縮限制
        before: function (that, bold, file) { //判斷圖片類型
            if (!/image\/\w+/.test(file.type)) {
                $.alert('請?zhí)峤粓D片格式文件', '')
                return false;
            }
            return true;
        },
        success: function (result) {
            var img = $('<img>');
            img.attr('src', result.base64);
            img.css({ 'width': '100px'});
    //此處100px設(shè)置在編輯帖子頁面的圖片寬度酥泞，
            var imgText = img[0].outerHTML
            CaretPos.setCaretPos();
    //獲取光標(biāo)位置的方法
            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>'
}
//根據(jù)val的數(shù)量*字體大小調(diào)整長度
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('請?zhí)顚懱訕?biāo)題逮栅！', '')
        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('請?zhí)顚憙?nèi)容', '')
        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>內(nèi)容</span><img src="/Resources/images/post_cha.png" alt="Alternate Text" class="close-all"/></div><div class="content-main" contenteditable="true" placeholder="請輸入內(nèi)容"></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默認(rèn)為空

    $(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: "請?zhí)峤粓D片格式的文件",
                    btn: '確認(rèn)'
                });
                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默認(rèn)為空
    var num = num || 1000; //添加幾個蹋辅，默認(rèn)為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: "請?zhí)峤粓D片格式的文件",
                    btn: '確認(rèn)'
                });
                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');

實(shí)訓(xùn)平臺圖片處理

//圖片處理
var UpdataImgAddress = null;
function ImgUploadInt(mainId) {
    var _this = "";//按鈕地址
    var mainId = mainId || ""; //主id默認(rèn)為空
    $('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: "請?zhí)峤粓D片格式的文件",
                    btn: '確認(rèn)'
                });
                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();
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末钱贯，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子侦另，更是在濱河造成了極大的恐慌秩命，老刑警劉巖，帶你破解...
    沈念sama閱讀 206,311評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件褒傅，死亡現(xiàn)場離奇詭異弃锐，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)殿托，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門霹菊，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人支竹，你說我怎么就攤上這事旋廷。” “怎么了礼搁？”我有些...
    開封第一講書人閱讀 152,671評論 0贊 342
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵饶碘，是天一觀的道長。 經(jīng)常有香客問我馒吴，道長扎运，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 55,252評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任饮戳，我火速辦了婚禮豪治，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘莹捡。我一直安慰自己鬼吵，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 64,253評論 5贊 371
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布篮赢。 她就那樣靜靜地躺著齿椅，像睡著了一般琉挖。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上涣脚，一...
    開封第一講書人閱讀 49,031評論 1贊 285
  • 城市分裂傳說
    那天示辈，我揣著相機(jī)與錄音，去河邊找鬼遣蚀。 笑死矾麻，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的芭梯。 我是一名探鬼主播险耀，決...
    沈念sama閱讀 38,340評論 3贊 399
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼玖喘！你這毒婦竟也來了甩牺？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 36,973評論 0贊 259
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤累奈，失蹤者是張志新（化名）和其女友劉穎贬派，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體澎媒，經(jīng)...
    沈念sama閱讀 43,466評論 1贊 300
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡搞乏，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,937評論 2贊 323
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了戒努。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片请敦。...
    茶點(diǎn)故事閱讀 38,039評論 1贊 333
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖储玫，靈堂內(nèi)的尸體忽然破棺而出冬三，到底是詐尸還是另有隱情，我是刑警寧澤缘缚，帶...
    沈念sama閱讀 33,701評論 4贊 323
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布勾笆，位于F島的核電站，受9級特大地震影響桥滨，放射性物質(zhì)發(fā)生泄漏窝爪。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,254評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一齐媒、第九天 我趴在偏房一處隱蔽的房頂上張望蒲每。 院中可真熱鬧，春花似錦喻括、人聲如沸邀杏。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0贊 19
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽望蜡。三九已至唤崭，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間脖律，已是汗流浹背谢肾。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1贊 262
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留小泉，地道東北人芦疏。 一個月前我還...
    沈念sama閱讀 45,497評論 2贊 354
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像微姊，于是被迫代替她去往敵國和親酸茴。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,786評論 2贊 345