说一下我的大致思路,首先监听form表单里面的file类型的input框,把上传的图片转成base64,然后把这个base64赋值给一个img标签的src,这样图片就可以预览出来了,接着就是调整的显示图片大小了。具体步骤请看图:
1.画一个form表单,里面有一个input,并且input的类型是file, 然后下面有一个img的标签,用于承接转换之后的base64的值,显示图片的预览。
<div style="clear: left;padding-top: 22px;"> <a href="#" onclick="oad.click();"><img src="${ctx}/images/error/sui1-so.jpg" style="height:auto;width:112px"/></a> </div> <div> <input class="tempPath" name="imgClassName" type="text" id="filepath" readonly="readonly" placeholder="请选择您所需上传的图片" /> <input class="upload_01" name="uploads" value="" id="oad" onchange="checkpic('oad');" type="file" multiple="multiple" style="visibility: hidden" /> </div> <img id="img0" name="img1" width="160px" height="180px" src="" />2.写监听file的js方法,给img的src赋值,显示图片预览
//监听file $("#headPortraitUpload").on("change",headPortraitListener); /*监听方法*/ function headPortraitListener(e) { var img = document.getElementById('img0'); if(window.FileReader) { var file = e.target.files[0]; var reader = new FileReader(); if (file && file.type.match('image.*')) { reader.readAsDataURL(file);//转换成base64 } else { img.css('display', 'none'); img.attr('src', ''); } reader.onloadend = function (e) { img.setAttribute('src', reader.result);//图片读取完成之后把base64的赋值给img的src } } }3.