欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js上传图片预览教程

程序员文章站 2023-08-18 21:13:15
js 上传图片预览 css .gjimg li{ float:left; width:265px; margin-left:100px; height:...

    js 上传图片预览

    css

    .gjimg li{
        float:left;
        width:265px;
        margin-left:100px;
        height:283px;
        overflow:hidden;
    }
    
    .gjimg li span{
        font-size:14px;
        color:#000;
        margin-left:65px;
        cursor:pointer;
    }
    
    .gjimg li .afile{
        width:230px;
        height: 230px;
        line-height: 230px;
        position: relative;
        cursor: pointer;
        color: #000;
        font-size:16px;
        text-align:center;
        background: #e5e5e5;
        border: 1px solid #d4d4d4;
        border-radius: 1px;
        overflow: hidden;
        display: inline-block;
        *display: inline;
        *zoom: 1
    }
    
    .gjimg li .afile input{
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        cursor: pointer;
        width:230px;
        height: 230px;
    }
    
    #xmtanimg{
        width:232px;
        height:232px;
        position:relative;
        top:-232px;display:none;
    }
    if (typeof filereader == 'undefined') {
        document.getelementbyid("xmtandiv").innerhtml = "

    当前不支持filereader接口

    "; //使选择控件不可操作 document.getelementbyid("xdatanfileimg").setattribute("disabled", "disabled"); } function xmtanuploadimg(obj) { var file = obj.files[0]; console.log(obj);console.log(file); console.log("file.size = " + file.size); //file.size 单位为byte var reader = new filereader(); //读取文件过程方法 reader.onloadstart = function (e) { console.log("开始读取...."); } reader.onprogress = function (e) { console.log("正在读取中...."); } reader.onabort = function (e) { console.log("中断读取...."); } reader.onerror = function (e) { console.log("读取异常...."); } reader.onload = function (e) { console.log("成功读取...."); var img = document.getelementbyid("xmtanimg"); img.style="display:block;"; img.src = e.target.result; //或者 img.src = this.result; //e.target == this } reader.readasdataurl(file); }