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();
    }
}

 

转载于:https://www.cnblogs.com/zrui-xyu/p/8022714.html