zoukankan      html  css  js  c++  java
  • 上传图片预览(部分-百度找的)

    html:

    1 <img id="img" src="https://www.baidu.com/img/baidu_jgylogo3.gif?v=35820489.gif" />
    2 <input type="file" name="file" id="inp" />

    css:

            img{
                display: block;
                width: 150px;
                height: 180px;
            }    

    javascript:未完

     1         window.onload = function(){
     2             var img=document.getElementById("img");
     3             var inp=document.getElementById("inp");
     4 
     5             inp.onchange = function(){
     6                 setImagePreview(inp,img);
     7             };
     8 
     9             //下面用于图片上传预览功能
    10             function setImagePreview(inp,img) {
    11                 alert(inp.value);
    12                 if(inp.files && inp.files[0])
    13                 {
    15                     //img.src = inp.files[0].getAsDataURL();
    16                     //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
    17                     img.src = window.URL.createObjectURL(inp.files[0]);
    18                 }
    19                 else
    20                 {
    21                     //IE下,使用滤镜
    22                     inp.select();
    23                     var imgSrc = document.selection.createRange().text;
    24                     var localImagId = document.getElementById("localImag");
    25                     //必须设置初始大小
    26                     localImagId.style.width = "150px";
    27                     localImagId.style.height = "180px";
    28                     //图片异常的捕捉,防止用户修改后缀来伪造图片
    29                     try{
    30                         localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
    31                         localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
    32                     }
    33                     catch(e)
    34                     {
    35                         alert("您上传的图片格式不正确,请重新选择!");
    36                         return false;
    37                     }
    38                     img.style.display = 'none';
    39                     document.selection.empty();
    40                 }
    41                 return true;
    42             }
    43         };
  • 相关阅读:
    table表格
    常见页面布局方式(三种框架集)
    学习标签属性3
    学习标签属性2
    学习标签属性1
    Purity in My Programming: Functions in Go
    cron一有趣处
    go函数作为一等民
    LRU算法
    go中的一个网络重连复用
  • 原文地址:https://www.cnblogs.com/wmh1106/p/4624962.html
Copyright © 2011-2022 走看看