zoukankan      html  css  js  c++  java
  • 图片上传即时显示缩略图解决方法

    图片上传即时显示缩略图解决方法(出自高手“风雪之隅” )

    <script language="javascript" type="text/javascript">
    var allowExt = ['jpg', 'gif', 'bmp', 'png', 'jpeg'];
    var preivew = function(file, container){
    try{
    var pic = new Picture(file, container);
    }catch(e){
    alert(e);
    }
    }
    //缩略图类定义
    var Picture = function(file, container){
    var height = 0,
    widht = 0,
    ext = '',
    size = 0,
    name = '',
    path = '';
    var self = this;
    if(file){
    name = file.value;
    if (window.navigator.userAgent.indexOf("MSIE")>=1){
    file.select();
    path = document.selection.createRange().text;
    }else if(window.navigator.userAgent.indexOf("Firefox")>=1){
    if(file.files){
    path = file.files.item(0).getAsDataURL();
    }else{
    path = file.value;
    }
    }
    }else{
    throw "bad file";
    }


    ext = name.substr(name.lastIndexOf("."), name.length);

    if(container.tagName.toLowerCase() != 'img'){
    throw "container is not a valid img label";
    container.visibility = 'hidden';
    }
    container.src = path;
    container.alt = name;
    container.style.visibility = 'visible';
    height = container.height;
    widht = container.widht;
    size = container.fileSize;


    this.get = function(name){
    return self[name];
    }

    this.isValid = function(){
    if(allowExt.indexOf(self.ext) !== -1){
    throw 'the ext is not allowed to upload';
    return false;
    }
    }
    }
    </script>
       <div class='previewDemo'>
    <input id="file" type="file" onchange="preivew(this, document.getElementById('img'));">
    <img id="img" style="visibility:hidden" height="100px" width="100px">
    </div>
  • 相关阅读:
    转:ASP.NET中的SESSION实现与操作方法
    SQLHelper
    【Shell】使用Shell脚本发布项目
    【JFinal】关于Model的继承
    【Chrome】离线版下载
    【IDEA 2016.3.4】License Server
    【Windows】修改C盘下用户名
    【MySql】查询数据库中所有表及列的信息
    maven 聚合工程 用spring boot 搭建 spring cloud 微服务 模块式开发项目
    rabbitMQ
  • 原文地址:https://www.cnblogs.com/tudoux/p/1490478.html
Copyright © 2011-2022 走看看