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>
  • 相关阅读:
    URL编码与解码
    什么通用数据交换格式更好
    JSON(JavaScript Object Notation)
    二维码与json都是数据交换格式
    数据的存在形式
    NSData、数据结构与数据转换
    物理结构与逻辑结构
    NSKeyedArchiver : NSCoder
    The Role of View Controllers
    Content-Type与MIME
  • 原文地址:https://www.cnblogs.com/tudoux/p/1490478.html
Copyright © 2011-2022 走看看