• jsp上传图片实时显示


    jsp代码

    <div class="form-group" id="caseIma">
    <label class="control-label">案例图片</label>
    <label class="btn btn-primary">选择图片
    <input type="file" style="display: none" class="form-control" id="caseImage" name="caseImage"
    onchange="viewImage(this)"/>
    </label>
    !--<p class="help-block">建议尺寸88*88</p>-->
    </div>
    <div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" />
    </div>

    js代码

    //上传图片后预览图片
    function viewImage(file){
                var preview = document.getElementById('preview');
                if(file.files && file.files[0]){
                    //火狐下
                    preview.style.display = "block";
                    preview.style.width = "300px";
                    preview.style.height = "120px";
                    preview.src = window.URL.createObjectURL(file.files[0]);
                }else{
                    //ie下,使用滤镜
                    file.select();
                    var imgSrc = document.selection.createRange().text;
                    var localImagId = document.getElementById("localImag"); 
                    //必须设置初始大小 
                    localImagId.style.width = "250px"; 
                    localImagId.style.height = "200px"; 
                    try{ 
                    localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    locem("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; 
                    }catch(e){ 
                    alert("您上传的图片格式不正确,请重新选择!"); 
                    return false; 
                    } 
                    preview.style.display = 'none'; 
                    document.selection.empty(); 
                    } 
                    return true; 
            }
  • 相关阅读:
    Nacos配置管理-什么是配置中心
    MYSQL count
    贷款
    短视频推荐图书
    前端
    err
    err
    Mysql8安装教程
    err
    err
  • 原文地址:https://www.cnblogs.com/suruozhong/p/6146027.html
Copyright © 2020-2023  润新知