zoukankan      html  css  js  c++  java
  • button上传替换file上传按钮,并显示图片缩略图,纯jsp操作

    1、jsp代码

                <div class="inputBox">
                      <span id="tu" <c:if test="${pd == null || pd.CACHET == '' || pd.CACHET == null}">style="display: none;"</c:if>>
                        <img id="img" src="<%=basePath%>uploadFiles/carousel/${pd.CACHET}" width="210"/>
                    </span>
                    <input type="button" class="update" id="yyzz" value="上传" onclick="$('#YYZZFBSMJ').click();">
                    <input type="file" name="YYZZFBSMJ" id="YYZZFBSMJ" style="display: none;" onchange="fileType(this)">
                </div>

    2、js代码:

    //过滤类型
    function fileType(obj){
        var fileType=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();//获得文件后缀名
        if(fileType != '.gif' && fileType != '.png' && fileType != '.jpg' && fileType != '.jpeg'){
            $(obj).tips({
                side:3,
                msg:'请上传图片格式的文件',
                bg:'#AE81FF',
                time:3
            });
            $(obj).val('');
        }else{
             var reader = new FileReader();
             reader.readAsDataURL(obj.files[0]);
             reader.onload = function (e) { 
                $("#img").attr("src",this.result);
             }
             $("#tu").show();
        }
    }
  • 相关阅读:
    jsp四个域对象
    java,qq邮箱发邮件工具类(需要部分修改)
    Java使用qq邮箱发邮件实现
    JavaScript 高级
    JavaScript基础
    JQuery 高级
    JQuery 基础
    团队最后一次作业:总结
    C++多态
    结对编程
  • 原文地址:https://www.cnblogs.com/zrui-xyu/p/8022714.html
Copyright © 2011-2022 走看看