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

/*
* 解决在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>‘;
    }
}

时间: 2024-12-20 23:28:13

常用js,解决 textarea换行,图片预览,等待加载的相关文章

js实现移动端图片预览:手势缩放, 手势拖动,双击放大...

.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > .katex-html { display: block; } .katex-display > .katex > .katex-html > .tag { position: absolute; right: 0px; } .katex { font-style: normal; font

解决导航下图片不能按需加载的问题减少对资源请求数量

问题描述:在一个三段式的navbar中,各段下面有一个长图(类似这样的) 在优化之前需要加载三张大图这无疑增加了资源请求数量 因此,我想到了将图片转换为背景以此减少请求没想到方案是可行的,上代码 <div class="page-navbar"> <!-- navbar --> <mt-navbar class="page-part" v-model="selected" swipeable> <mt-t

Uploadify—借助Uploadify插件实现图片预览时如何解决Chrome浏览器报“喔唷,崩溃啦”

今天借助Uploadify插件实现了图片预览及其上传的功能,可是在Chrome浏览器中会时不时地出现如下图所示的情况: 解决方法:使用这种方法引用该插件js文件: <script type="text/javascript"> document.write("<script type='text/javascript' src='<%=basePath %>js/uploadify/jquery.uploadify.min.js?" +

兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/Headphoto/noperson.jpg" style="width: 160px; height: 170px;border: solid 1px #d2e2e2;" alt="" /> </div> <asp:FileUpload

JS魔法堂之实战:纯前端的图片预览

一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服务器,接着就获取图片路径并赋值到img元素上.先不管文件异步提交的解决方案,就是服务端清理那些临时的预览图片已经增加不少工作量了. 偶然从MDN上找到纯前端图片预览的相关资料,经过整理后记录下来以便日后查阅. 二.准备功夫1──FileReader FileReader是HTML5的新特性,用于读取

利用js加载本地图片预览功能

直接上代码: 经测试,除safari6包括6以下不支持,其他均可正常显示. 原因:safari6不支持filereader,同时不能使用IE滤镜导致失效. fix: 可以利用canvas,解决safari6的问题 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

JS实现的图片预览功能

之前的博文有实现过图片上传预览,但那种方法是预览时就将图片上传,会产生很大的浪费空间.找到了之前有人写的用JS实现的图片预览,就说用js将上传的图片显示,上传代码在之前的博文中有写到. 以下是实现的代码: body: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td heig

html5+js实现图片预览

在上传图片时,经常需要预览图片. 本用例使用html5+js实现上传图片的本地预览.鼠标移至预览图片可以显示大图. 代码: <html> <head> <title>My JSP '01.jsp' starting page</title> <link rel="stylesheet" type="text/css" href="css/common.css" /> <script

js本地图片预览代码兼容所有浏览器

html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id="imgHeadPhoto" src="www.niyuewo.com" style="width: 160px; height: 170px;border: solid 1px #d2e2e2;" /> </div> <a