常用js,解决 textarea换行，图片预览，等待加载

Posted 2020-08-02

/*
* 解决在textarea中输入的数据存入数据库后读到页面没有换行效果
* textarea_info是显示在页面内容区域的class
* 使用方法：直接在相应的区域加上class="textarea_info"
* 在js中调用textarea_br()即可
* */
    function textarea_br(){
        var element = $(".textarea_info");
        element.each(function(){
            var temp =  $(this).text().replace(/\n/g,‘<br/>‘);
            $(this).html(temp);
        });
    }

/*
* 加载问题
*load_img是加载图片的class
* 使用方法：1.页面引用<img src="{{ asset(‘assets/images/load.png‘) }}" class="load_img">
*     2.js中顶部调用waiting_load()
*     3.在需要等待加载提醒的地方调用  $interval = window.setInterval(img_load, 100);即可
* */
function waiting_load(){
    $(‘.load_img‘).css(‘display‘,‘none‘);
    var num=1;
    function img_load(){
        if($(‘.load_img‘).css(‘display‘)==‘none‘){
            $(‘.load_img‘).css(‘display‘,‘block‘);
        }
        num++;
        $(‘.load_img‘).css({
            "transform":"rotate("+num*20+"deg)",
            "-ms-transform":"rotate("+num*20+"deg)",
            "-moz-transform":"rotate("+num*20+"deg)",
            "-webkit-transform":"rotate("+num*20+"deg)",
            "-o-transform":"rotate("+num*20+"deg)"
        });
        var now_url = window.location.href;
        if(num==100){
            window.clearInterval($interval);
            alert(‘亲，您的网太卡了‘);
        }
    }
}


/*
* 图片预览
* image_preview 是放预览图片的区域id
* upload_input 是上传图片的input的id
* img_upload_info 是消息提示信息框的id
* 使用方法：在上传图片的input 添加id="upload_input" 然后绑定onchange="preview(this)"
*
* */
function preview(file)
{
    var prevDiv = document.getElementById(‘image_preview‘);
    var imgSize=file.files[0].size;
    if(imgSize>1000000){
        layer.alert(‘图片太大，请选择小于1M的图片‘);
        document.getElementById(‘upload_input‘).value=‘‘;
        document.getElementById(‘img_upload_info‘).innerHTML=‘*图片太大，请调整后重新上传‘;
    }else if (file.files && file.files[0])
    {
        var reader = new FileReader();
        reader.onload = function(evt){
            prevDiv.innerHTML = ‘<img src="‘ + evt.target.result + ‘" />‘;
        }
        reader.readAsDataURL(file.files[0]);
    }
    else
    {
        prevDiv.innerHTML = ‘<div class="img"  style="width:180px;height:250px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\‘‘ + file.value + ‘\‘"></div>‘;
    }
}