zoukankan      html  css  js  c++  java
  • javascript实现图片预览

    <input name="w_s" type="file" id="w_s" onChange="load_img(this.value,img_s);">
    <input name="w_b" type="file" id="w_b" onChange="load_img(this.value,img_b);">
    <div id="img_s"></div>
    <div id="img_b"></div>

    <script language="javascript">
    <!--
    function load_img(p_src,write_id){
    var t_html;
    if(p_src!=''){
    if(write_id==img_s){
    t_html
    ="<img src='"+p_src+"' onLoad='javascript:if(this.width>120){this.width=120;}if(this.height>120){this.height=120;}'>";
    }
    else{
    t_html
    ="<img src='"+p_src+"' onLoad='javascript:if(this.width>240){this.width=240;}if(this.height>240){this.height=240;}'>"
    }

    }
    else{
    t_html
    ="";
    }

    write_id.innerHTML
    =t_html;
    }

    //-->


    function change()
    {
        
    if (form1.fType.value == 0)
        
    {
            labeltxt.innerText 
    = "图片预览:";
            showtxt.style.display 
    = "none";
            showpic.style.display 
    = "block";
        }

        
    else
        
    {
            labeltxt.innerText 
    = "文字(txt):";
            showpic.style.display 
    = "none";
            showtxt.style.display 
    = "block";
        }

    }

    function show()
    {
        showpic.innerHTML
    ="<img src='"+form1.file.value+"' onLoad='javascript:if(this.width>256){this.height=this.height/(this.width/256);this.width=256;}if(this.height>256){this.width=this.width/(this.height/256);this.height=256;}'/>";
    }


  • 相关阅读:
    Vue源码学习之双向绑定
    Vue源码学习之数据初始化
    JavaScript跨域资源请求(CORS)解决方案
    Vue学习笔记
    MongoDB学习笔记
    实现一个类似bootstrap的多级下拉菜单
    bootstrap栅格系统的实现
    滑动效果的标签页切换
    一个简单的类似Vue的双向绑定
    元素垂直居中的常见方法
  • 原文地址:https://www.cnblogs.com/nasdaqhe/p/542008.html
Copyright © 2011-2022 走看看